<template>
  <div>
    <Drawer
      :value="visible"
      :styles="{ padding: '0 0 60px' }"
      width="1000"
      @on-visible-change="drawerChange"
    >
      <div class="drawer-main">
        <div class="header">
          <Icon custom="iconfont iconmanjianmanzhe" size="60" color="#7C189F" />

          <div>
            <div class="title">{{ formValidate.store_name }}</div>
            <div>Product ID：{{ productId }}</div>
          </div>
        </div>
        <Tabs v-model="currentTab" @on-click="onhangeTab">
          <TabPane
            v-for="(item, index) in headTab"
            :key="index"
            :label="item.title"
            :name="item.name"
          ></TabPane>
        </Tabs>
        <Form
          class="formValidate"
          ref="formValidate"
          :rules="ruleValidate"
          :model="formValidate"

          :label-width="labelWidth"
          :label-position="labelPosition"
          :disabled="!!pid"
          @submit.native.prevent
        >
          <Row type="flex" v-show="currentTab === '1'">
            <!-- 商品信息-->
            <Col span="24">
              <FormItem label="产品标题：">
<!--                <p>{{formValidate.store_name}}</p>-->
                <Input
                    disabled
                  v-model="formValidate.store_name"
                  v-width="'50%'"
                />
              </FormItem>
            </Col>
			<Col span="24">
			  <FormItem label="产品类目：" prop="cate_id">
			    <el-cascader
			        placeholder="请选择产品目录"
			        v-width="'50%'"
			        size="mini"
			        v-model="formValidate.cate_id"
			        :options="treeSelect"
			        :props="props"
			        filterable
			        clearable>
			    </el-cascader>
			  </FormItem>
			</Col>
            <!-- <Col span="24">
              <FormItem label="产品类目：">
                <el-cascader
                    disabled
                  v-width="'50%'"
                  size="mini"
                  v-model="formValidate.cate_id"
                  :options="treeSelect"
                  :props="props"
                  filterable
                  clearable
                  :disabled="!!pid"
                >
                </el-cascader>
              </FormItem>
            </Col> -->
            <Col span="24" class="brandName">
              <FormItem label="产品品牌：">
                <Cascader
                  :data="brandData"
                  change-on-select
                  disabled
                  v-model="formValidate.brand_id"
                  filterable
                  v-width="'50%'"
                ></Cascader>
              </FormItem>
            </Col>
			<Col span="24">
			  <FormItem label="产品编码：" prop="mpn">
			    <Input
			        v-model="formValidate.mpn"
			        placeholder="产品编码"
			        v-width="'50%'"
			    />
			  </FormItem>
			</Col>
<!--            <Col span="24">-->
<!--              <FormItem label="商品标签：" class="labelClass">-->
<!--                <div class="acea-row row-middle">-->
<!--                  <div-->
<!--                    class="labelInput acea-row row-between-wrapper"-->
<!--                    @click="openStoreLabel"-->
<!--                  >-->
<!--                    <div style="width: 90%">-->
<!--                      <div v-if="storeDataLabel.length">-->
<!--                        <Tag-->
<!--                          closable-->
<!--                          v-for="item in storeDataLabel"-->
<!--                          :key="item.id"-->
<!--                          @on-close="closeStoreLabel(item)"-->
<!--                          >{{ item.label_name }}</Tag-->
<!--                        >-->
<!--                      </div>-->
<!--                      <span class="span" v-else>选择商品标签</span>-->
<!--                    </div>-->
<!--                    <div class="iconfont iconxiayi"></div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </FormItem>-->
<!--            </Col>-->

			<Col span="24" class="product_size">
			  <FormItem label="产品尺寸：" prop="size">
							<table style="border-collapse: collapse;text-align: center;" width="50%" border="1px solid #dcdee2">
							     <tr>
									 <td>长</td>
									 <td>宽</td>
									 <td>高</td>
									 <td></td>
								 </tr>
								 <tr>
								 	 <td width="25%">
									 <Input
									     v-model="formValidate.size_data.long"
									 />
									 </td>
								 	 <td width="25%">
										 <Input
										     v-model="formValidate.size_data.width"
										 />
									 </td>
								 	 <td width="25%">
										 <Input
										     v-model="formValidate.size_data.height"
										 />
									 </td>
								 	 <td>
										 <Input
										     v-model="formValidate.size_data.unit" value="cm" disabled
										 />

									 </td>
								 </tr>
							</table>
			  </FormItem>
			</Col>
		    <Col span="24">
		      <FormItem label="产品属性：" prop="" >
				  <el-tooltip placement="top">
					  <div slot="content">
						 商品属性是展示商品关键信息的重要内容， </br>
					  有助于增强买家对您的商品的了解， </br>
					  填写属性顺序决定该属性在产品详情中的展示顺序， </br>
					  可以通过上移或者下移设置想要展示的顺序
					  </div>
				        <i class="el-icon-question help-icon"></i>
				</el-tooltip>
		       <Col span="24">
		         <FormItem v-if="formValidate.attr_data.length !== 0">
		           <draggable
		               class="dragArea list-group"
		               :list="formValidate.attr_data"
		               group="peoples"
		               handle=".move-icon"
		               :move="checkMove"
		               @end="end"
		           >
		             <div
		                 v-for="(item, index) in formValidate.attr_data"
		                 :key="index"
		                 class="acea-row row-middle mb10"
		             >
		              <!-- <div class="move-icon">
		                 <span class="iconfont icondrag2"></span>
		               </div> -->
					   
		               <div
		                   style="width: 90%"
		                   :class="moveIndex === index ? 'borderStyle' : ''"
		               >
		                 <div class="acea-row row-middle">
		                    <!-- 名称输入框 -->
		                                <Input
		                                    v-model="item.name"
		                                    :placeholder="$t('page.product.please_input_the_name')"
		                                    class="mr5"
											                  v-width="'25%'"
		                                    @input="handleAttrChange(index, 'name', $event)"
		                                />
		                                
		                                <!-- 值输入框 -->
		                                <Input
		                                    v-model="item.value"
		                                    :placeholder="$t('page.product.please_input_the_value')"
		                                    class="mr5"
											                  v-width="'25%'"
		                                    @input="handleAttrChange(index, 'value', $event)"
		                                />
										<!-- 删除按钮 -->
										<Icon
										      type="ios-close-circle"
										      size="14"
										      class="curs"
											  @click="removeAttrData(index)"
										  />
		                 </div>
		               </div>
					   
		             </div>
		           </draggable>
		         </FormItem>
		       </Col>
		      </FormItem>
		    </Col>

            <Col span="24">
              <!-- <FormItem label="页面展示图片：">
                <div class="acea-row">
                  <div
                    class="pictrue"
                    v-for="(item, index) in formValidate.slider_image"
                    :key="index"
                    draggable="true"
                    @dragstart="handleDragStart($event, item)"
                    @dragover.prevent="handleDragOver($event, item)"
                    @dragenter="handleDragEnter($event, item)"
                    @dragend="handleDragEnd($event, item)"
                  >
                    <img v-lazy="item" />

                  </div>

                  <Input
                    v-model="formValidate.slider_image[0]"
                    class="input-display"
                  ></Input>
                </div>

              </FormItem> -->
			  <FormItem label="页面展示图片：" prop="slider_image">
			    <div class="acea-row">
			      <div
			        class="pictrue"
			        v-for="(item, index) in formValidate.slider_image"
			        :key="index"
			        draggable="true"
			        @dragstart="handleDragStart($event, item)"
			        @dragover.prevent="handleDragOver($event, item)"
			        @dragenter="handleDragEnter($event, item)"
			        @dragend="handleDragEnd($event, item)"
			      >
			        <!-- 为 img 标签添加点击事件 -->
			        <img 
			          v-lazy="item" 
			          @click="handleImageClick(index)"
			          style="cursor: pointer;"
			        />
			        <Button
			          shape="circle"
			          icon="md-close"
			          @click.native="handleRemove(index)"
			          class="btndel"
			        ></Button>
			      </div>
			      <div
			        v-if="formValidate.slider_image.length < 10"
			        class="upLoad acea-row row-center-wrapper"
			        @click="modalPicTap('duo')"
			      >
			        <Icon type="ios-camera-outline" size="26" />
			      </div>
			      <Input
			        v-model="formValidate.slider_image[0]"
			        class="input-display"
			      ></Input>
			    </div>
			  </FormItem>
            </Col>
            <!-- <Col span="24">
              <FormItem label="Video：">
                <i-switch v-model="formValidate.video_open" size="large">
                  <span slot="open">open</span>
                  <span slot="close">close</span>
                </i-switch>
              </FormItem>
            </Col> -->
            <Col span="24" v-if="formValidate.video_open">
              <FormItem label="Video Type：">
                <RadioGroup v-model="seletVideo" disabled @on-change="changeVideo">
                  <Radio :label="0" class="radio">Local Video</Radio>
                  <Radio :label="1">Video Link</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col span="24" v-if="formValidate.video_open">
              <FormItem label="">
                <Input
                    disabled
                  v-if="seletVideo == 1 && !formValidate.video_link"
                  v-width="'50%'"
                  v-model="videoLink"
                  placeholder="Please enter the video link"
                />
                <input
                    disabled
                  type="file"
                  ref="refid"
                  @change="zh_uploadFile_change"
                  class="input-display"
                />
                <div
                  v-if="
                    seletVideo == 0 &&
                    (upload_type !== '1' || videoLink) &&
                    !formValidate.video_link
                  "
                  class="ml10 videbox"
                  @click="zh_uploadFile"
                >
                  +
                </div>
                <Button
                  v-if="
                    seletVideo == 1 &&
                    (upload_type !== '1' || videoLink) &&
                    !formValidate.video_link
                  "
                  type="primary"
                  icon="ios-cloud-upload-outline"
                  class="uploadVideo"
                  @click="zh_uploadFile"
                  >Add</Button
                >
                <Upload
                  v-if="upload_type === '1' && !videoLink"
                  :show-upload-list="false"
                  :action="fileUrl2"
                  :before-upload="videoSaveToUrl"
                  :data="uploadData"
                  :headers="header"
                  :multiple="true"
                  style="display: inline-block"
                >
                  <div
                    v-if="seletVideo === 0 && !formValidate.video_link"
                    class="videbox"
                  >
                    +
                  </div>
                </Upload>
                <div class="iview-video-style" v-if="formValidate.video_link">
                  <video
                    class="video-style"
                    :src="formValidate.video_link"
                    controls="controls"
                  >
                    Your browser does not support video tags.
                  </video>
                  <div class="mark"></div>
                  <Icon
                    type="ios-trash-outline"
                    class="iconv"
                    @click="delVideo"
                  />
                </div>
                <Progress
                  class="progress"
                  :percent="progress"
                  :stroke-width="5"
                  v-if="upload.videoIng || videoIng"
                />
                <div class="tips">Suggested duration: 9-30 seconds, video aspect ratio 16:9</div>
              </FormItem>
            </Col>

          </Row>
          <Row type="flex" v-show="currentTab === '2'">
            <Col span="24">
              <FormItem label="商品规格：" props="spec_type">
                <RadioGroup
                    disabled
                  v-model="formValidate.spec_type"
                  @on-change="changeSpec"
                >
                  <Radio disabled :label="0" class="radio">单规格</Radio>
                  <Radio disabled :label="1">多规格</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <!-- 多规格添加-->
            <Col span="24" v-if="formValidate.spec_type === 1" class="noForm">
              <Col span="24">
                <FormItem label="产品规格：">
                  <div class="acea-row row-middle">
                    <Select
                        disabled
                      v-model="formValidate.selectRule"
                      style="width: 23%"
                    >
                      <Option
                        v-for="(item, index) in ruleList"
                        :value="item.rule_name"
                        :key="index"
                        >{{ item.rule_name }}</Option
                      >
                    </Select>
<!--                    <Button type="primary" class="mr20" @click="confirm"-->
<!--                      >{{$t('page.product.confirm')}}</Button-->
<!--                    >-->
<!--                    <Button @click="addRule">{{$t('page.product.add_specifications')}}</Button>-->
                  </div>
                </FormItem>
              </Col>
              <Col span="24">
                <FormItem v-if="attrs.length !== 0">
                  <draggable
                    class="dragArea list-group"
                    :list="attrs"
                    group="peoples"
                    handle=".move-icon"
                    :move="checkMove"
                    @end="end"
                  >
                    <div
                      v-for="(item, index) in attrs"
                      :key="index"
                      class="acea-row row-middle mb10"
                    >
                      <div class="move-icon">
                        <span class="iconfont icondrag2"></span>
                      </div>
                      <div
                        style="width: 90%"
                        :class="moveIndex === index ? 'borderStyle' : ''"
                      >
                        <div class="acea-row row-middle">
                          <span class="mr5">{{ item.value }}</span
                          ><Icon
                            type="ios-close-circle"
                            size="14"
                            class="curs"
                            @click="handleRemoveRole(index)"
                          />
                        </div>
                        <div class="rulesBox">
                          <draggable :list="item.detail" handle=".drag">
                            <Tag
                              type="dot"
                              closable
                              color="primary"
                              v-for="(j, indexn) in item.detail"
                              :key="indexn"
                              :name="j"
                              class="mr20 drag"
                              @on-close="handleRemove2(item.detail, indexn)"
                              >{{ j }}</Tag
                            >
                          </draggable>
<!--                          <Input-->
<!--                            search-->
<!--                            enter-button="添加"-->
<!--                            placeholder="Please Enter The Attribute Name"-->
<!--                            v-model="item.detail.attrsVal"-->
<!--                            @on-search="createAttr(item.detail.attrsVal, index)"-->
<!--                            class="width-add"-->
<!--                          />-->
                        </div>
                      </div>
                    </div>
                  </draggable>
                </FormItem>
              </Col>
              <Col span="24" v-if="createBnt">
                <FormItem>
<!--                  <Button-->
<!--                    type="primary"-->
<!--                    icon="md-add"-->
<!--                    @click="addBtn"-->
<!--                    class="mr15"-->
<!--                    >{{$t('page.product.add_new_specifications')}}</Button-->
<!--                  >-->
<!--                  <Button type="success" @click="generate(1)">{{$t('page.product.submit')}}</Button>-->
                </FormItem>
              </Col>
              <Col span="24" v-if="showIput">
                <Col :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
                  <FormItem :label="$t('page.product.specifactions')+'：'">
                    <Input
                        disabled
                      v-model="formDynamic.attrsName"
                    />
                  </FormItem>
                </Col>
                <Col :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
                  <FormItem label="值：">
                    <Input
                        disabled
                      v-model="formDynamic.attrsVal"
                    />
                  </FormItem>
                </Col>
                <Col :xl="6" :lg="5" :md="10" :sm="24" :xs="24">
                  <FormItem>
                    <Button type="primary" class="mr15" @click="createAttrName"
                      >确认</Button
                    >
                    <Button @click="offAttrName">取消</Button>
                  </FormItem>
                </Col>
              </Col>
              <!-- 多规格设置-->
              <Col
                :xl="24"
                :lg="24"
                :md="24"
                :sm="24"
                :xs="24"
                v-if="
                  manyFormValidate.length &&
                  formValidate.header.length !== 0 &&
                  attrs.length !== 0
                "
              >
                <!-- 批量设置-->
                <Col span="24">
                  <FormItem label="批量设置：" class="labeltop">
                    <Table
                      :data="oneFormBatch"
                      :columns="
                        formValidate.product_type == 1
                          ? columnsCarMy
                          : formValidate.product_type == 3
                          ? columnsFictitious
                          : columns2
                      "
                      border
                    >
                      <template slot-scope="{ row, index }" slot="attr">
                        <div
                          @click="batchAttr"
                          class="acea-row row-between-wrapper"
                          style="cursor: pointer"
                        >
                          <div style="width: 41px">
                            {{ oneFormBatch[0].attr }}
                          </div>
                          <span class="iconfont icondrop-down"></span>
                        </div>
                      </template>
                      <template slot-scope="{ row, index }" slot="pic">
                        <div
                          class="acea-row row-middle row-center-wrapper"
                          @click="modalPicTap('dan', 'duopi', index)"
                        >
                          <div
                            class="pictrue pictrueTab"
                            v-if="oneFormBatch[0].pic"
                          >
                            <img v-lazy="oneFormBatch[0].pic" />
                          </div>
                          <div
                            class="
                              upLoad
                              pictrueTab
                              acea-row
                              row-center-wrapper
                            "
                            v-else
                          >
                            <Icon
                              type="ios-camera-outline"
                              size="26"
                              class="iosfont"
                            />
                          </div>
                        </div>
                      </template>
                      <template slot-scope="{ row, index }" slot="price">
                        <InputNumber
                            disabled
                          v-model="oneFormBatch[0].price"
                          :min="0"
                          class="priceBox"
                        ></InputNumber>
                      </template>
                      <template slot-scope="{ row, index }" slot="settle_price">
                        <InputNumber
                            disabled
                            v-model="oneFormBatch[0].settle_price"
                            :min="0"
                            class="priceBox"
                        ></InputNumber>
                      </template>
                      <template slot-scope="{ row, index }" slot="discount">
                        <InputNumber
                            disabled
                            v-model="oneFormBatch[0].discount"
                            :min="0"
                            class="priceBox"
                        ></InputNumber>
                      </template>
<!--                      <template slot-scope="{ row, index }" slot="cost">-->
<!--                        <InputNumber-->
<!--                          v-model="oneFormBatch[0].cost"-->
<!--                          :min="0"-->
<!--                          class="priceBox"-->
<!--                        ></InputNumber>-->
<!--                      </template>-->
                      <template slot-scope="{ row, index }" slot="ot_price">
                        <InputNumber
                            disabled
                          v-model="oneFormBatch[0].ot_price"
                          :min="0"
                          class="priceBox"
                        ></InputNumber>
                      </template>
                      <template slot-scope="{ row, index }" slot="parcel_num">
                        <InputNumber
                            disabled
                            v-model="oneFormBatch[0].parcel_num"
                            :min="0"
                            class="priceBox"
                        ></InputNumber>
                      </template>
                      <template slot-scope="{ row, index }" slot="stock">
                        <InputNumber
                            disabled
                          v-model="oneFormBatch[0].stock"
                          :min="0"
                          :disabled="formValidate.product_type == 1 || openErp"
                          class="priceBox"
                        ></InputNumber>
                      </template>
                      <template slot-scope="{ row, index }" slot="bar_code">
                        <Input disabled v-model="oneFormBatch[0].bar_code"></Input>
                      </template>
                      <template slot-scope="{ row, index }" slot="code">
                        <Input disabled v-model="oneFormBatch[0].code"></Input>
                      </template>
                      <template slot-scope="{ row, index }" slot="weight">
                        <InputNumber
                            disabled
                          v-model="oneFormBatch[0].weight"
                          :step="0.1"
                          :min="0"
                          class="priceBox"
                        ></InputNumber>
                      </template>
                      <template slot-scope="{ row, index }" slot="volume">
                        <InputNumber
                            disabled
                          v-model="oneFormBatch[0].volume"
                          :step="0.1"
                          :min="0"
                          class="priceBox"
                        ></InputNumber>
                      </template>
                      <template
                        slot-scope="{ row, index }"
                        slot="fictitious"
                        v-if="formValidate.product_type == 1"
                      >
                        <Button
                          v-if="!row.virtual_list && !row.stock"
                          @click="addVirtual(0, 'oneFormBatch')"
                          >Add Card Password</Button
                        >
                        <span
                          v-else
                          class="seeCatMy"
                          @click="
                            seeVirtual(oneFormBatch[0], 'oneFormBatch', 0)
                          "
                          >已设置</span
                        >
                      </template>
                      <template slot-scope="{ row, index }" slot="action">
                        <a @click="batchAdd">批量设置</a>
                        <Divider type="vertical" />
                        <a @click="batchDel">清空</a>
                      </template>
                    </Table>
                  </FormItem>
                </Col>
                <!-- 多规格表格-->
                <Col span="24">
                  <FormItem label="产品规格：" class="labeltop">
                    <Table
                      :data="manyFormValidate"
                      :columns="translatedColumns"
                      border
                    >
                      <template
                        slot-scope="{ row, index }"
                        v-for="(item, i) in attrData.length"
                        :slot="'value' + (i + 1)"
                      >
                        <div
                          :class="
                            manyFormValidate[index].select ? 'selectOn' : ''
                          "
                        >
                          {{ manyFormValidate[index]['value' + (i + 1)] }}
                        </div>
                      </template>
                      <template slot-scope="{ row, index }" slot="pic">
                        <div
                          class="acea-row row-middle row-center-wrapper"
                          @click="modalPicTap('dan', 'duoTable', index)"
                        >
                          <div
                            class="pictrue pictrueTab"
                            v-if="manyFormValidate[index].pic"
                          >
                            <img v-lazy="manyFormValidate[index].pic" />
                          </div>
                          <div
                            class="
                              upLoad
                              pictrueTab
                              acea-row
                              row-center-wrapper
                            "
                            v-else
                          >
                            <Icon type="ios-camera-outline" size="21" />
                          </div>
                        </div>
                      </template>
                      <template slot-scope="{ row, index }" slot="price">
                        <InputNumber
                            disabled
                          v-model="manyFormValidate[index].price"
                          :min="0"
                          class="priceBox"
                        ></InputNumber>
                      </template>
					  <template slot-scope="{ row, index }" slot="settle_price">
					    <InputNumber
                  disabled
					        v-model="manyFormValidate[index].settle_price"
					        :min="0"
					        class="priceBox"
					    ></InputNumber>
					  </template>

                      <template slot-scope="{ row, index }" slot="ot_price">
                        <InputNumber
                            disabled
                          v-model="manyFormValidate[index].ot_price"
                          :min="0"
                          class="priceBox"
                        ></InputNumber>
                      </template>
                      <template slot-scope="{ row, index }" slot="parcel_num">
                        <InputNumber
                            disabled
                            v-model="manyFormValidate[index].parcel_num"
                            :min="0"
                            class="priceBox"
                        ></InputNumber>
                      </template>
                      <template slot-scope="{ row, index }" slot="discount">
                        <InputNumber
                            disabled
                            v-model="manyFormValidate[index].discount"
                            :min="0"
                            class="priceBox"
                        ></InputNumber>
                      </template>
                      <template slot-scope="{ row, index }" slot="stock">
                        <InputNumber
                            disabled
                          v-model="manyFormValidate[index].stock"
                          :min="0"
                          :precision="0"
                          :disabled="formValidate.product_type == 1 || openErp"
                          class="priceBox"
                        ></InputNumber>
                      </template>
                      <template slot-scope="{ row, index }" slot="bar_code">
                        <Input
                            disabled
                          v-model="manyFormValidate[index].bar_code"
                        ></Input>
                      </template>
                      <template slot-scope="{ row, index }" slot="code">
                        <Input disabled v-model="manyFormValidate[index].code"></Input>
                      </template>
                      <template slot-scope="{ row, index }" slot="weight">
                        <InputNumber
                            disabled
                          v-model="manyFormValidate[index].weight"
                          :min="0"
                          class="priceBox"
                        ></InputNumber>
                      </template>
                      <template slot-scope="{ row, index }" slot="volume">
                        <InputNumber
                            disabled
                          v-model="manyFormValidate[index].volume"
                          :min="0"
                          class="priceBox"
                        ></InputNumber>
                      </template>
                      <template slot-scope="{ row, index }" slot="fictitious">
                        <Button
                            v-if="(!manyFormValidate[index].parcel_list || !manyFormValidate[index].parcel_list.length)"
                            @click="addParcel(index)"
                        >添加包裹
                        </Button>
                        <span
                            v-else
                            class="seeCatMy"
                            @click="addParcel(index)"
                        >已设置</span>
                      </template>
                      <template slot-scope="{ row, index }" slot="action">
                        <a @click="delAttrTable(index)">已设置</a>
                      </template>
                    </Table>
                  </FormItem>
                </Col>
              </Col>
            </Col>
            <!-- 单规格表格-->
            <div v-if="formValidate.spec_type === 0" style="width: 100%">
              <Col span="24">
                <FormItem label="图片：">
                  <div
                    class="pictrueBox"
                    @click="modalPicTap('dan', 'danTable', 0)"
                  >
                    <div class="pictrue" v-if="oneFormValidate[0].pic">
                      <img v-lazy="oneFormValidate[0].pic" />
                    </div>
                    <div class="upLoad acea-row row-center-wrapper" v-else>
                      <Input
                        v-model="oneFormValidate[0].pic"
                        class="input-display"
                      ></Input>
                      <Icon type="ios-camera-outline" size="26" />
                    </div>
                  </div>
                </FormItem>
              </Col>
              <Col span="24" class="asterisk">
                <FormItem label="销售价：">
                  <InputNumber
                      disabled
                    v-model="oneFormValidate[0].price"
                    :min="0"
                    :max="99999999"
                    v-width="'50%'"
                  ></InputNumber>
                </FormItem>
              </Col>
<!--			  <Col span="24" class="asterisk">-->
<!--			    <FormItem label="结算价：">-->
<!--			      <InputNumber-->
<!--			          v-model="oneFormValidate[0].settle_price"-->
<!--			          :min="0"-->
<!--			          :max="99999999"-->
<!--			          v-width="'50%'"-->
<!--			      ></InputNumber>-->
<!--			    </FormItem>-->
<!--			  </Col>-->
<!--              <Col span="24" class="asterisk">-->
<!--                <FormItem label="成本价：">-->
<!--                  <InputNumber-->
<!--                    v-model="oneFormValidate[0].cost"-->
<!--                    :min="0"-->
<!--                    :max="99999999"-->
<!--                    v-width="'50%'"-->
<!--                  ></InputNumber>-->
<!--                </FormItem>-->
<!--              </Col>-->
              <Col span="24">
                <FormItem label="原价：">
                  <InputNumber
                      disabled
                    v-model="oneFormValidate[0].ot_price"
                    :min="0"
                    :max="99999999"
                    v-width="'50%'"
                  ></InputNumber>
                </FormItem>
              </Col>
<!--              <Col span="24" class="asterisk">-->
<!--                <FormItem label="库存：">-->
<!--                  <InputNumber-->
<!--                    v-model="oneFormValidate[0].stock"-->
<!--                    :min="0"-->
<!--                    :max="99999999"-->
<!--                    :disabled="formValidate.product_type == 1 || openErp"-->
<!--                    :precision="0"-->
<!--                    v-width="'50%'"-->
<!--                  ></InputNumber>-->
<!--                </FormItem>-->
<!--              </Col>-->
              <Col span="24" class="asterisk">
                <div class="asteriskInfo on">*</div>
                <FormItem label="折扣：">
                  <InputNumber
                      disabled
                      v-model="oneFormValidate[0].discount"
                      :min="0"
                      :max="100"
                      v-width="'50%'"
                  ></InputNumber>
                </FormItem>
              </Col>
<!--              <Col span="24">-->
<!--                <FormItem label="商品条形码：">-->
<!--                  <Input-->
<!--                    v-model.trim="oneFormValidate[0].bar_code"-->
<!--                    v-width="'50%'"-->
<!--                    placeholder="请输入商品条形码"-->
<!--                  ></Input>-->
<!--                </FormItem>-->
<!--              </Col>-->
              <Col span="24">
                <FormItem label="SKU：">
                  <Input
                      disabled
                    v-model.trim="oneFormValidate[0].code"
                    v-width="'50%'"
                
                  ></Input>
                </FormItem>
              </Col>
			  <Col span="24">
				  <FormItem label="箱：">
				    <Table :data="oneFormValidate[0].parcel_list" :columns="parcelColumns" border>
				      <template slot-scope="{ row, index }" slot="num">
				  			<Input
				  			    disabled
								v-model="row.num"
								v-width="'50%'"             
				  			></Input>
				      </template>
				      <template slot-scope="{ row, index }" slot="length">
				                      <InputNumber
				                        v-model="row.length"
				                        :min="0"
				                        disabled
				                        class="priceBox"
				                      ></InputNumber>
				                    </template>
				                    
				                    <template slot-scope="{ row, index }" slot="width">
				                      <InputNumber
				                        v-model="row.width"
				                        :min="0"
				                        disabled
				                        class="priceBox"
				                      ></InputNumber>
				                    </template>
				                    
				                    <template slot-scope="{ row, index }" slot="height">
				                      <InputNumber
				                        v-model="row.height"
				                        :min="0"
				                        disabled
				                        class="priceBox"
				                      ></InputNumber>
				                    </template>
				                    
				                    <template slot-scope="{ row, index }" slot="weight">
				                      <InputNumber
				                        v-model="row.weight"
				                        :min="0"
				                        disabled
				                        class="priceBox"
				                      ></InputNumber>
				                    </template>
				    </Table>
				  </FormItem>
			  </Col>
              <Col span="24" v-if="formValidate.product_type == 0">
                <FormItem label="Weight（KG）：">
                  <InputNumber
                      disabled
                    v-model="oneFormValidate[0].weight"
                    :min="0"
                    :max="99999999"
                    v-width="'50%'"
                  ></InputNumber>
                </FormItem>
              </Col>
              <Col span="24" v-if="formValidate.product_type == 0">
                <FormItem label="Volume(m³)：">
                  <InputNumber
                      disabled
                    v-model="oneFormValidate[0].volume"
                    :min="0"
                    :max="99999999"
                    v-width="'50%'"
                  ></InputNumber>
                </FormItem>
              </Col>
              <Col span="24" v-if="formValidate.product_type == 1">
                <FormItem label="Password Setting：">
                  <Button
                    v-if="
                      !oneFormValidate[0].virtual_list.length &&
                      !oneFormValidate[0].stock
                    "
                    @click="addVirtual(0, 'oneFormValidate')"
                    >Add Card Password</Button>
                  <span
                    v-else
                    class="seeCatMy"
                    @click="
                      seeVirtual(oneFormValidate[0], 'oneFormValidate', 0)
                    "
                    >Already Set</span
                  >
                </FormItem>
              </Col>
            </div>
          </Row>
          <!-- 商品详情 -->
          <Row v-show="currentTab === '3'" class="mb10">
			  <Col span="24" class="asterisk">
			  
			  			  <FormItem>
			  
			  			  </FormItem>
			    <FormItem label="产品特点+："  class="vertical-layout">
			  				<div class="tips" id="description-tip">
			  					1. 产品特点需包含产品关键词、尺寸、功能、产品特色等突出产品优势的文案。
			  					<!-- 1. Features should include the following: key words, functionalities, and distinct features that will help the product stand out. -->
			  					<br/>
			  					2. 产品特点仅支持文字说明，图文说明或产品细节展示可在详细描述中展示。
			  					<!-- 2. For images and other details, please put them in [Detailed Description]. -->
			  					<br/>
			  					3. 请至少输入四条产品特点，前四条每条字符数不少于50。不允许出现中文。
			  					<!-- 3. Minimum four features are required, and minimum 50 characters each for the first four features. Chinese characters are not allowed. -->
			  					<br/>
			  					4. 请勿提及与产品特点和描述无关的句子。如：售后相关信息、保修期限、促销类广告、指定快递、个人联系方式、建议零售价等。
			  					<!-- 4. DO NOT put any information unrelated to product features and descriptions here, such as after-sales support, warranty period, promotional messages, specific carriers, personal contact info, SRP, etc. -->
			  				</div>
			      <p v-for="(item, index) in formValidate.features" :key="index" style="margin-bottom: 10px;">
			        <Input
			            v-model="formValidate.features[index]"
			            v-width="'50%'"
			            style="margin-right: 5px;"
			  					maxlength="500"
			  					show-word-limit
			        />
			        
			      </p>
			      <!-- <a @click="addFeatures()" icon="md-add">+ {{$t('page.product.add_more')}}</a> -->
			    </FormItem>
			  </Col>
            <Col span="22" offset="1">
              <wangeditor
                ref="wangeditor"
                style="width: 100%"
                :content="contents"
                @editorContent="getEditorContent"
              ></wangeditor>
            </Col>
            <!-- <Col span="6" style="width: 33%">
            <div class="ifam">
              <div class="content" v-html="content"></div>
            </div>
          </Col> -->
          </Row>
          <!-- 其他设置-->
          <Row v-show="currentTab === '4'">
<!--            <Col span="24">-->
<!--              <FormItem label="商品关键字：" prop="">-->
<!--                <Input-->
<!--                    v-model="formValidate.keyword"-->
<!--                    placeholder="请输入商品关键字"-->
<!--                    v-width="'50%'"-->
<!--                />-->
<!--              </FormItem>-->
<!--            </Col>-->
            <Col span="24">
              <FormItem :label="$t('page.product.product_parameter')">
                <Input
                    disabled
                  v-model="formValidate.store_info"
                  type="textarea"
                  :rows="3"
                  :placeholder="$t('page.product.please_parameters')"
                  v-width="'50%'"
                />
              </FormItem>
            </Col>
<!--            <Col span="24">-->
<!--              <FormItem label="商品推荐图：">-->
<!--                <div-->
<!--                  class="pictrueBox"-->
<!--                  @click="modalPicTap('dan', 'recommend_image')"-->
<!--                >-->
<!--                  <div class="pictrue" v-if="formValidate.recommend_image">-->
<!--                    <img v-lazy="formValidate.recommend_image" />-->
<!--                    <Input-->
<!--                      v-model="formValidate.recommend_image"-->
<!--                      class="input-display"-->
<!--                    ></Input>-->
<!--                  </div>-->
<!--                  <div class="upLoad acea-row row-center-wrapper" v-else>-->
<!--                    <Input-->
<!--                      v-model="formValidate.recommend_image"-->
<!--                      class="input-display"-->
<!--                    ></Input>-->
<!--                    <Icon type="ios-camera-outline" size="26" />-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="tips">(建议图片比例5:2)</div>-->
<!--              </FormItem>-->
<!--            </Col>-->
<!--            <Col span="24">-->
<!--              <FormItem label="商品参数：">-->
<!--                <Select-->
<!--                  v-model="formValidate.specs_id"-->
<!--                  clearable-->
<!--                  filterable-->
<!--                  v-width="'50%'"-->
<!--                  placeholder="请输入商品参数"-->
<!--                  @on-change="specsInfo"-->
<!--                >-->
<!--                  <Option-->
<!--                    v-for="(item, index) in specsData"-->
<!--                    :value="item.id"-->
<!--                    :key="index"-->
<!--                    >{{ item.name }}</Option-->
<!--                  >-->
<!--                </Select>-->
<!--              </FormItem>-->
<!--            </Col>-->
<!--            <Col span="24" v-if="formValidate.specs_id">-->
<!--              <FormItem label="" props="">-->
<!--                <Table-->
<!--                  border-->
<!--                  :columns="specsColumns"-->
<!--                  :data="specsList"-->
<!--                  ref="table"-->
<!--                  class="specsList"-->
<!--                  width="700"-->
<!--                >-->
<!--                  <template slot-scope="{ row, index }" slot="action">-->
<!--                    <a @click="delSpecs(index)" v-if="index > 0">删除</a>-->
<!--                  </template>-->
<!--                </Table>-->
<!--                <Button class="mt20" @click="addSpecs">添加参数</Button>-->
<!--              </FormItem>-->
<!--            </Col>-->
          </Row>
          <!-- 商品评论 -->
          <Row v-show="currentTab === '5'">
            <Col span="22" offset="1">
              <Table
                ref="table"
                :columns="replyColumns"
                :data="replyData"
                class="ivu-mt"
                :loading="replyLoading"
                no-data-text="No data available at the moment"
                no-filtered-data-text="No filtering results available at the moment"
              >
                <template slot-scope="{ row }" slot="info">
                  <div class="imgPic acea-row row-middle">
                    <viewer>
                      <div class="pictrue"><img v-lazy="row.image" /></div>
                    </viewer>
                    <div class="info">{{ row.store_name }}</div>
                  </div>
                </template>
                <template slot-scope="{ row }" slot="content">
                  <div class="mb5 content_font">{{ row.comment }}</div>
                  <viewer>
                    <div
                      class="pictrue mr10"
                      v-for="(item, index) in row.pics || []"
                      :key="index"
                    >
                      <img v-lazy="item" />
                    </div>
                  </viewer>
                </template>
                <template slot-scope="{ row }" slot="merchant_reply_content">
                  <div class="mb5 content_font" v-if="row.replyComment">
                    {{ row.replyComment.content }}
                  </div>
                </template>
                <template slot-scope="{ row, index }" slot="action">
                  <a @click="reply(row)">Reply</a>
                </template>
              </Table>
            </Col>
          </Row>
          <Spin size="large" fix v-if="spinShow"></Spin>
        </Form>
      </div>
      <Modal
        v-model="modalPic"
        width="960px"
        scrollable
        footer-hide
        closable
        title="Upload product image"
        :mask-closable="false"
        :z-index="999"
      >
        <uploadPictures
          :isChoice="isChoice"
          @getPic="getPic"
          @getPicD="getPicD"
          :gridBtn="gridBtn"
          :gridPic="gridPic"
          v-if="modalPic"
        ></uploadPictures>
      </Modal>
      <Card :bordered="false" dis-hover class="fixed-card">
        <Form>
          <FormItem>
            <Button v-if="currentTab !== '1'" @click="upTab">{{$t('page.product.prev')}}</Button>
            <Button
              type="primary"
              class="submission"
              v-if="currentTab !== '3'"
              @click="downTab('formValidate')"
              >{{$t('page.order.next_step')}}</Button
            >
            <!-- <Button
              type="primary"
              :disabled="openSubimit"
              class="submission"
              @click="handleSubmit('formValidate')"
              v-if="!pid && (productId || currentTab === '5')"
              >Save</Button
            > -->
          </FormItem>
        </Form>
      </Card>
    </Drawer>
    <freightTemplate
      :template="template"
      v-on:changeTemplate="changeTemplate"
      ref="templates"
    ></freightTemplate>
    <add-attr ref="addattr" @getList="userSearchs"></add-attr>
    <!-- 商品列表 -->
    <Modal
      v-model="goodsModals"
      title="Product List"
      footerHide
      scrollable
      width="900"
      @on-cancel="goodCancel"
    >
      <goods-list
        v-if="goodsModals"
        ref="goodslist"
        @getProductId="getProductId"
        :ischeckbox="true"
      ></goods-list>
    </Modal>
    <!-- 商品标签 -->
    <Modal
      v-model="storeLabelShow"
      scrollable
      title="Select Product Label"
      :closable="true"
      width="540"
      :footer-hide="true"
      :mask-closable="false"
    >
      <labelList
        ref="storeLabel"
        @activeData="activeStoreData"
        @close="storeLabelClose"
      ></labelList>
    </Modal>
    <menus-from
      :formValidate="formBrand"
      :fromName="1"
      ref="menusFrom"
    ></menus-from>
    <Modal
      v-model="attrShow"
      scrollable
      title="请选择商品规格"
      :closable="false"
      width="320"
      :footer-hide="true"
      :mask-closable="false"
    >
      <attr-list
        :attrs="attrsList"
        @activeData="activeAttr"
        @close="labelAttr"
        @subAttrs="subAttrs"
        v-if="attrShow"
      ></attr-list>
    </Modal>
    <Modal v-model="replyModal" scrollable title="Reply Content" closable>
      <Form ref="replyForm" :model="replyForm" :rules="ruleInline" :label-position="labelPosition" @submit.native.prevent>
        <FormItem prop="content">
          <Input v-model="replyForm.content" type="textarea" :rows="4" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="oks">Confirm</Button>
        <Button @click="cancels">Cancel</Button>
      </div>
    </Modal>
    <Modal v-model="parcelShow"
           scrollable
           title="添加包裹"
           :closable="true"
           width="720"
           :footer-hide="true"
           :mask-closable="false"
    >
      <Form  ref="dynamicValidateForm" :label-width="100" class="demo-dynamic">
        <FormItem label="包裹信息：" class="labeltop">
          <Table :data="parcelNumValidateForm" :columns="parcelColumns" border>
            <template slot-scope="{ row, index }" slot="num">
              <Input
                  v-model="parcelNumValidateForm[index].num"
              ></Input>
            </template>
            <template slot-scope="{ row, index }" slot="length">
              <InputNumber
                  v-model="parcelNumValidateForm[index].length"
                  :min="0"
                  class="priceBox"
              ></InputNumber>
            </template>
            <template slot-scope="{ row, index }" slot="width">
              <InputNumber
                  v-model="parcelNumValidateForm[index].width"
                  :min="0"
                  class="priceBox"
              ></InputNumber>
            </template>
            <template slot-scope="{ row, index }" slot="height">
              <InputNumber
                  v-model="parcelNumValidateForm[index].height"
                  :min="0"
                  class="priceBox"
              ></InputNumber>
            </template>
            <template slot-scope="{ row, index }" slot="weight">
              <InputNumber
                  v-model="parcelNumValidateForm[index].weight"
                  :min="0"
                  class="priceBox"
              ></InputNumber>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <a @click="parcelDel">Delete</a>
            </template>
          </Table>
        </FormItem>
        <!-- <FormItem>
          <Button type="primary" @click="submitParcel()">Submit</Button>
          <Button @click="addDomain">Add</Button>
        </FormItem> -->
      </Form>

    </Modal>

  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import Setting from '@/setting';
import util from '@/libs/util';
import vuedraggable from 'vuedraggable';
import uploadPictures from '@/components/uploadPictures';
import freightTemplate from '@/components/freightTemplate';
import wangeditor from '@/components/wangEditor/index.vue';
import menusFrom from './menusFrom';
import labelList from '@/components/labelList';
import couponList from '@/components/couponList';
import goodsList from '@/components/goodsList/index';
import addAttr from './addAttr';
import attrList from './attrList';
import {
  productInfoApi,
  cascaderList,
  productAddApi,
  generateAttrApi,
  productGetRuleApi,
  productGetTemplateApi,
  productGetTempKeysApi,
  checkActivityApi,
  productCache,
  cacheDelete,
  brandList,
  productCreateApi,
  productAllUnit,
  productUnitCreate,
  uploadType,
  productAllEnsure,
  productLabelAdd,
  productAllSpecs,
  productReplyApi,
  setReplyApi,
  allSystemForm,
  systemFormInfo,
  cascaderListApi,
} from '@/api/product';
import { erpConfig } from '@/api/erp';
import { uploadByPieces } from '@/utils/upload'; //引入uploadByPieces方法
export default {
  components: {
    uploadPictures,
    freightTemplate,
    goodsList,
    addAttr,
    couponList,
    menusFrom,
    attrList,
    labelList,
    wangeditor,
    draggable: vuedraggable,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    productId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      parcelShow:false,
      //包裹信息
      parcelNumValidateForm: [
        {
          num:"",
          length: 0,
          width:0,
          height:0,
          weight:0,
        }
      ],
      // parcelColumns: [
      //   {
      //     title: "序号",
      //     slot: "num",
      //     align: "center",
      //     minWidth: 80,
      //   },
      //   {
      //     title: "L(cm)",
      //     slot: "length",
      //     align: "center",
      //     minWidth: 80,
      //   },
      //   {
      //     title: "W(cm)",
      //     slot: "width",
      //     align: "center",
      //     minWidth: 80,
      //   },
      //   {
      //     title: "H(cm)",
      //     slot: "height",
      //     align: "center",
      //     minWidth: 80,
      //   },
      //   {
      //     title: "重量（KG）",
      //     slot: "weight",
      //     align: "center",
      //     minWidth: 80,
      //   },
      //   {
      //     title: "操作",
      //     slot: "action",
      //     // fixed: "right",
      //     align: "center",
      //     minWidth: 140,
      //   },
      // ],
      parcelNumValidateFormIndex:0,
      formTypeList: [],
      formColumns: [
        {
          title: '表单标题',
          key: 'title',
          // align:'center',
          minWidth: 100
        },
        {
          title: '表单类型',
          key: 'name',
          // align:'center',
          minWidth: 100
        },
        {
          title: '是否必填',
          slot: 'require',
          // align:'center',
          minWidth: 100
        }
      ],
      specsList: [],
      specsColumns: [
        {
          title: '参数名称',
          key: 'name',
          align: 'center',
          width: 150,
          render: (h, params) => {
            return h('div', [
              h('Input', {
                props: {
                  value: params.row.name,
                  placeholder: '请输入参数名称',
                },
                on: {
                  'on-change': (e) => {
                    params.row.name = e.target.value;
                    this.specsList[params.index].name = e.target.value;
                  },
                },
              }),
            ]);
          },
        },
        {
          title: '参数值',
          key: 'value',
          align: 'center',
          width: 300,
          render: (h, params) => {
            return h('div', [
              h('Input', {
                props: {
                  value: params.row.value,
                  placeholder: '请输入参数值',
                },
                on: {
                  'on-change': (e) => {
                    params.row.value = e.target.value;
                    this.specsList[params.index].value = e.target.value;
                  },
                },
              }),
            ]);
          },
        },
        {
          title: '排序',
          key: 'sort',
          align: 'center',
          width: 100,
          render: (h, params) => {
            return h('div', [
              h('InputNumber', {
                props: {
                  value: parseInt(params.row.sort) || 0,
                  placeholder: '排序',
                  precision: 0,
                },
                on: {
                  'on-change': (e) => {
                    params.row.sort = e;
                    this.specsList[params.index].sort = e;
                  },
                },
              }),
            ]);
          },
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
          minWidth: 120,
        },
      ],
      //自定义留言下拉选择
      customList: [
        {
          value: 'text',
          label: '文本框',
        },
        {
          value: 'number',
          label: '数字',
        },
        {
          value: 'email',
          label: '邮件',
        },
        {
          value: 'data',
          label: '日期',
        },
        {
          value: 'time',
          label: '时间',
        },
        {
          value: 'id',
          label: '身份证',
        },
        {
          value: 'phone',
          label: '手机号',
        },
        {
          value: 'img',
          label: '图片',
        },
      ],
      // headTab: [
      //   { title: $t('page.product.general_information'), name: '1' },
      //   { title: $t('page.product.specifications'), name: '2' },
      //   { title: $t('page.product.description'), name: '3' },
      //   // { title: 'Other Settings', name: '4' },
      //   // { title: '商品评论', name: '5' },
      // ],
      productType: [
        { name: '普通商品', title: '物流发货', id: 0 },
        { name: '卡密/网盘', title: '自动发货', id: 1 },
        { name: '虚拟商品', title: '虚拟发货', id: 3 },
      ],
      virtualList: [],
      carMyShow: false, //是否开启卡密弹窗
      customBtn: false, //自定义留言开关
      attrShow: false,
      content: '',
      contents: '',
      seletVideo: 0,
      fileUrl: Setting.apiBaseURL + '/file/upload',
      fileUrl2: Setting.apiBaseURL + '/file/video_upload',
      upload_type: '', //视频上传类型 1 本地上传 2 3 4 OSS上传
      uploadData: {}, // 上传参数
      header: {},
      storeDataLabel: [],
      labelShow: false,
      storeLabelShow: false,
      props: { emitPath: false, multiple: true, checkStrictly: true },
      type: 0,
      goodsModals: false,
      off_show: 0,
      modals: false,
      spinShow: false,
      openSubimit: false,
      grid2: {
        xl: 10,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
      grid3: {
        xl: 18,
        lg: 18,
        md: 20,
        sm: 24,
        xs: 24,
      },
      // 批量设置表格data
      oneFormBatch: [
        {
          attr: 'All',
          pic: '',
          price: 0,
          discount: 0,
          settle_price: 0,
          cost: 0,
          ot_price: 0,
          parcel_num: 0,
          stock: 0,
          bar_code: '',
          code: '',
          weight: 0,
          volume: 0,
        },
      ],
      // 规格数据
      formDynamic: {
        attrsName: '',
        attrsVal: '',
      },
      formDynamicNameData: [],
      isBtn: false,
      columnsCarMy: [],
      // columns2: [
      //   {
      //     title: 'Specification',
      //     slot: 'attr',
      //     align: 'center',
      //     minWidth: 80,
      //   },
      //   {
      //     title: 'Image',
      //     slot: 'pic',
      //     align: 'center',
      //     minWidth: 80,
      //   },
      //   {
      //     title: 'Wholesale Price',
      //     slot: 'price',
      //     align: 'center',
      //     minWidth: 95,
      //   },
      //   {
      //     title: "Discount",
      //     slot: "discount",
      //     align: "center",
      //     minWidth: 95,
      //   },
      // {
      //   title: "Settlement Price",
      //   slot: "settle_price",
      //   align: "center",
      //   minWidth: 95,
      // },
      //   // {
      //   //   title: '成本价',
      //   //   slot: 'cost',
      //   //   align: 'center',
      //   //   minWidth: 95,
      //   // },
      //   {
      //     title: 'Original Price',
      //     slot: 'ot_price',
      //     align: 'center',
      //     minWidth: 95,
      //   },
      //   {
      //     title: 'Inventory',
      //     slot: 'stock',
      //     align: 'center',
      //     minWidth: 95,
      //   },
      //   {
      //     title: 'Bar Code',
      //     slot: 'bar_code',
      //     align: 'center',
      //     minWidth: 120,
      //   },
      //   {
      //     title: 'SKU',
      //     slot: 'code',
      //     align: 'center',
      //     minWidth: 120,
      //   },
      //   {
      //     title: 'Weight（KG）',
      //     slot: 'weight',
      //     align: 'center',
      //     minWidth: 95,
      //   },
      //   {
      //     title: 'Volume(m³)',
      //     slot: 'volume',
      //     align: 'center',
      //     minWidth: 95,
      //   },
      //   {
      //     title: 'Operate',
      //     slot: 'action',
      //     align: 'center',
      //     minWidth: 140,
      //   },
      // ],
      columns: [],
      columnsInstall: [],
      columnsInstal2: [],
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      formValidate: {
		  size_data:{
		    	long:"",
		    	width:"",
		    	height:'',
		    	unit:"cm",
		  },
        system_form_id:0,//自定义表单id
        supplier_id: 0, //供应商
        is_limit: 0, //是否限购开关
        limit_type: 1, //1单次限购，2长期限购
        limit_num: 1, //限购数量
        disk_info: '', //卡密简介
        auto_on_time: '',
        video_open: false, //视频按钮是否显示
        store_name: '',
        freight: 1, //运费设置
        postage: 0, //设置运费金额
        custom_form: [], //自定义留言
        cate_id: [],
        ensure_id: [],
        keyword: '',
        unit_name: '',
        specs_id: 0,
        store_info: '',
        bar_code: '',
        code: '',
        image: '',
        recommend_image: '',
        slider_image: [],
        description: '',
        ficti: 0,
        sort: 0,
        is_show: 1,
        is_hot: 0,
        is_benefit: 0,
        is_best: 0,
        is_new: 0,
        is_good: 0,
        is_postage: 0,
        id: 0,
        spec_type: 0,
        video_link: '',
        temp_id: '',
        attrs: [],
		attr_data:[
			{
			name: 'Main features',
			value: ''
			},
			{
			name: 'Upholstery Material',
			value: ''
			},
			{
			name: 'Use Case',
			value: ''
			},
			{
			name: 'Place of Origin',
			value: ''
			},
		],
        items: [
          {
            pic: '',
            price: 0,
            cost: 0,
            ot_price: 0,
            parcel_num: 0,
            discount: 0,
            stock: 0,
            bar_code: '',
            code: '',
          },
        ],
        header: [],
        selectRule: '',
        coupon_ids: [],
        command_word: '',
        delivery_type: ["1"],
        specs: [],
        recommend_list: [],
        brand_id: [],
        product_type: 0,
      },
      ruleList: [],
      templateList: [],
      createBnt: false,
      showIput: false,
      manyFormValidate: [],
      // 单规格表格data
      oneFormValidate: [
        {
          pic: '',
          price: 0,
          discount: 0,
          settle_price: 0,
          cost: 0,
          ot_price: 0,
          parcel_num: 0,
          stock: 0,
          bar_code: '',
          code: '',
          weight: 0,
          volume: 0,
          brokerage: 0,
          brokerage_two: 0,
          vip_price: 0,
          virtual_list: [],
		  parcel_list: []
        },
      ],
      images: [],
      imagesTable: '',
      currentTab: '1',
      isChoice: '',
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      loading: false,
      modalPic: false,
      template: false,
      uploadList: [],
      treeSelect: [],
      labelSelect: [],
      ensureData: [],
      specsData: [],
      picTit: '',
      tableIndex: 0,
      ruleValidate: {
        store_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
        ],
        cate_id: [
          {
            required: true,
            message: '请选择商品分类',
            trigger: 'change',
            type: 'array',
          },
        ],
        keyword: [
          { required: true, message: '请输入商品关键字', trigger: 'blur' },
        ],
        unit_name: [
          {
            required: true,
            message: '请输入单位',
            trigger: 'change',
          },
        ],
        store_info: [
          { required: true, message: '请输入商品简介', trigger: 'blur' },
        ],
        slider_image: [
          {
            required: true,
            message: '请上传商品轮播图',
            type: 'array',
            trigger: 'change',
          },
        ],
        spec_type: [
          { required: true, message: '请选择商品规格', trigger: 'change' },
        ],
        selectRule: [
          { required: true, message: '请选择商品规格属性', trigger: 'change' },
        ],
      },
      manyBrokerage: 0,
      manyBrokerageTwo: 0,
      manyVipPrice: 0,
      upload: {
        videoIng: false, // 是否显示进度条；
      },
      videoIng: false, // 是否显示进度条；
      progress: 0, // 进度条默认0
      videoLink: '',
      attrs: [],
      updateIds: [],
      updateName: [],
      rakeBack: [
        {
          title: '一级返佣',
          slot: 'brokerage',
          align: 'center',
          width: 95,
        },
        {
          title: '二级返佣',
          slot: 'brokerage_two',
          align: 'center',
          width: 95,
        },
      ],
      member: [
        {
          title: '会员价',
          slot: 'vip_price',
          align: 'center',
          width: 95,
        },
      ],
      headerCarMy: {
        title: '卡密设置',
        slot: 'fictitious',
        align: 'center',
        width: 95,
      },
      columnsInstalM: [],
      moveIndex: '',
      goodsData: [],
      brandData: [],
      unitNameList: [],
      formBrand: {},
      attrsList: [],
      activeAtter: [],
      tabIndex: 0,
      tabName: '',
      attrData: [],
      datePickerOptions: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        },
      },
      openErp: false,
      pid: 0,
      replyColumns: [
        {
          title: '评论ID',
          key: 'id',
          width: 80,
        },
        {
          title: '商品信息',
          slot: 'info',
          minWidth: 280,
        },
        {
          title: '用户名称',
          key: 'nickname',
          minWidth: 150,
        },
        {
          title: '评分',
          key: 'score',
          minWidth: 90,
        },
        {
          title: '评价内容',
          slot: 'content',
          minWidth: 210,
        },
        {
          title: '回复内容',
          slot: 'merchant_reply_content',
          minWidth: 250,
        },
        {
          title: '评价时间',
          key: 'add_time',
          minWidth: 150,
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          minWidth: 150,
        },
      ],
      replyData: [],
      replyLoading: false,
      replyValidate: {
        is_reply: '',
        store_name: '',
        account: '',
        product_id: 0,
        page: 1,
        limit: 15,
      },
      total: 0,
      replyModal: false,
      rows: {},
      replyForm: {
        content: '',
      },
      ruleInline: {
        content: [
          { required: true, message: '请输入回复内容', trigger: 'blur' },
        ],
      },
      formList: []
    };
  },
  computed: {
    ...mapState('store/layout', ['isMobile', 'menuCollapse']),
    labelWidth() {
      return this.isMobile ? undefined : 120;
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right';
    },
    labelBottom() {
      return this.isMobile ? undefined : 15;
    },
    startPickOptions() {
      const that = this;
      return {
        disabledDate(time) {
          if (that.formValidate.auto_off_time) {
            return (
              time.getTime() >
              new Date(that.formValidate.auto_off_time).getTime() - 86400000
            );
          }
          return '';
        },
      };
    },
    endPickOptions() {
      const that = this;
      return {
        disabledDate(time) {
          if (that.formValidate.is_show == '1') {
            return time.getTime() < Date.now();
          }
          if (that.formValidate.auto_on_time) {
            return (
              time.getTime() <
              new Date(that.formValidate.auto_on_time).getTime() + 86400000
            );
          }
          return '';
        },
      };
    },
    changeUnit() {
      const { unitNameList } = this;
      const { unit_name } = this.formValidate;
      return {
        unitNameList,
        unit_name,
      };
    },
	columns2(){
		return [
		  {
		    title: '产品规格',
		    slot: 'attr',
		    align: 'center',
		    minWidth: 80,
		  },
		  {
		    title: '图片',
		    slot: 'pic',
		    align: 'center',
		    minWidth: 80,
		  },
		  {
		    title: '销售价',
		    slot: 'price',
		    align: 'center',
		    minWidth: 95,
		  },
		//   {
		//     title: $t('page.order.discount'),
		//     slot: "discount",
		//     align: "center",
		//     minWidth: 95,
		//   },
		// {
		//   title: $t('page.product.settlement_price'),
		//   slot: "settle_price",
		//   align: "center",
		//   minWidth: 95,
		// },
		//   {
		//     title: $t('page.product.original_price'),
		//     slot: 'ot_price',
		//     align: 'center',
		//     minWidth: 95,
		//   },
		  {
		    title: '库存列表',
		    slot: 'stock',
		    align: 'center',
		    minWidth: 95,
		  },
		  // {
		  //   title: $t('page.product.bar_code'),
		  //   slot: 'bar_code',
		  //   align: 'center',
		  //   minWidth: 120,
		  // },
		  {
		    title: 'SKU',
		    slot: 'code',
		    align: 'center',
		    minWidth: 120,
		  },
		  {
		    title:'重量（KG）',
		    slot: 'weight',
		    align: 'center',
		    minWidth: 95,
		  },
		  // {
		  //   title: $t('page.product.volume')+'(m³)',
		  //   slot: 'volume',
		  //   align: 'center',
		  //   minWidth: 95,
		  // },
		  // {
		  //   title: $t('page.product.operate'),
		  //   slot: 'action',
		  //   align: 'center',
		  //   minWidth: 140,
		  // },
		]
	},
	headTab(){
		return [
		  { title: '产品基本信息', name: '1' },
		  { title: '产品规格', name: '2' },
		  { title: '产品描述', name: '3' },
		  // { title: 'Other Settings', name: '4' },
		  // { title: '商品评论', name: '5' },
		]
	},
	translatedColumns() {
	    return this.formValidate.header.map(col => ({
	      ...col,
	      title: col.title   // fallback 原文
	    }))
	  },
	  parcelColumns(){
	  	return [
	  	  {
	  	    title: '序号',
	  	    slot: "num",
	  	    align: "center",
	  	    minWidth: 200,
	  	  },
	  	  {
	  	    title:'长度(cm)',
	  	    slot: "length",
	  	    align: "center",
	  	    minWidth: 80,
	  	  },
	  	  {
	  	    title: '宽度(cm)',
	  	    slot: "width",
	  	    align: "center",
	  	    minWidth: 80,
	  	  },
	  	  {
	  	    title: '高度(cm)',
	  	    slot: "height",
	  	    align: "center",
	  	    minWidth: 80,
	  	  },
	  	  {
	  	    title: '重量(KG)',
	  	    slot: "weight",
	  	    align: "center",
	  	    minWidth: 80,
	  	  },
	  	  // {
	  	  //   title: this.$t('page.product.operate'),
	  	  //   slot: "action",
	  	  //   align: "center",
	  	  //   minWidth: 140,
	  	  // },
	  	]
	  },
  },
  watch: {
    changeUnit({ unitNameList, unit_name }) {
      if (!unit_name) {
        return;
      }
      let result = unitNameList.find((unit) => unit.name == unit_name);
      if (!result) {
        this.formValidate.unit_name = '';
      }
    },
    currentTab(value) {
      this.$nextTick(() => {
        if (this.pid && value == 3) {
          this.$refs.wangeditor.editor.disable();
        } else {
          this.$refs.wangeditor.editor.enable();
        }
      });
    }
  },
  created() {
    this.columns = this.columns2.slice(1, 10);
    let data = JSON.parse(JSON.stringify(this.columns2));
    data.splice(8, 2, this.headerCarMy);
    this.columnsCarMy = data;
    let fictitious = JSON.parse(JSON.stringify(this.columns2));
    fictitious.splice(8, 2);
    this.columnsFictitious = fictitious;
    this.getToken();
    this.getErpConfig();
  },
  mounted() {
    this.setCopyrightShow({ value: false });
    if ((this.productId !== '0' && this.productId) || this.$route.query.copy) {
      this.getInfo();
    } else if (this.productId === '0') {
      productCache()
        .then((res) => {
          let data = res.data.info;
          if (!Array.isArray(data)) {
            let cate_id = data.cate_id.map(Number);
            this.attrs = data.items || [];
            let ids = [];
            let brandIds = [];
            data.brand_id.forEach(item=>{
              brandIds.push(item.toString())
            })
            this.formValidate = data;
            this.formTypeList = data.custom_form_info || [];
            this.formValidate.brand_id = brandIds;
            this.formValidate.coupon_ids = ids;
            this.formValidate.is_limit = this.formValidate.is_limit ? 1 : 0;
            this.formValidate.limit_type = parseInt(
              this.formValidate.limit_type
            );
            this.updateIds = ids;
            this.updateName = data.coupons;
            this.formValidate.cate_id = cate_id;
            this.storeDataLabel = data.store_label_id;
            this.specsList = data.specs;
            this.oneFormValidate = data.attrs;
            this.formValidate.header = [];
            this.generate(0);
            this.columns = this.columns2.slice(1, 10);
            this.formValidate.system_form_id = data.system_form_id || 0;
            if (this.formValidate.system_form_id) {
              this.customBtn = true;
            }else{
              this.customBtn = false;
            }
            this.spec_type = data.spec_type;
            if (data.spec_type === 0) {
              this.manyFormValidate = [];
            } else {
              this.createBnt = true;
              this.oneFormValidate = [
                {
                  pic: data.slider_image[0],
                  price: 0,
				          settle_price: 0,
                  cost: 0,
                  ot_price: 0,
                  stock: 0,
                  discount: 0,
                  parcel_num: 0,
                  bar_code: '',
                  code: '',
                  weight: 0,
                  volume: 0,
                  brokerage: 0,
                  brokerage_two: 0,
                  vip_price: 0,
                  virtual_list: [],
                },
              ];
            }
            this.spinShow = false;
          }
        })
        .catch((err) => {
          this.$Message.error(err.msg);
        });
    }
    if (this.$route.query.type) {
      this.modals = true;
      this.type = this.$route.query.type;
    } else {
      this.type = 0;
    }
    this.goodsCategory();
    this.productGetRule();
    // this.productGetTemplate();
    this.getBrandList();
    // this.getAllUnit();
    this.uploadType();
    // this.getProductAllEnsure();
    this.getProductAllSpecs();
    // this.getAllSystemForm();
  },
  destroyed() {
    this.setCopyrightShow({ value: true });
  },
  methods: {
    ...mapMutations('layout', ['setCopyrightShow']),
    changeForm(e){
      this.getSystemFormInfo(e,{type:1});
    },
	// 点击图片时调用预览
	    handleImageClick(index) {
	      this.$viewerApi({
	        images: this.formValidate.slider_image,
	        options: {
	          inline: false,
	          button: false,
	          navbar: false,
	          title: false,
	          toolbar: false,
	          tooltip: false,
	          movable: false,
	          zoomable: false,
	          rotatable: false,
	          scalable: false,
	          transition: false,
	          fullscreen: false,
	          keyboard: false,
	        }
	      }).view(index);
	    },
    addParcel(index) {
		console.log("oneFormValidate2222222",this.oneFormValidate)
		console.log("index",index)
      if (this.formValidate.spec_type){
        if (this.manyFormValidate[index].code == ""){
          this.$Message.error("请先填写规格SKU!");
          return
        }
        this.parcelNumValidateForm = this.manyFormValidate[index].parcel_list;

      }else {
        if (this.oneFormValidate[index].code == ""){
          this.$Message.error("请先填写规格SKU!");
          return
        }
        this.parcelNumValidateForm = this.oneFormValidate[index].parcel_list;
      }
      this.parcelNumValidateFormIndex = index
      this.parcelShow = true;
    },
    // 删除包裹
    parcelDel(index) {
      this.parcelNumValidateForm.splice(index, 1);
    },
    submitParcel() {
      if (this.formValidate.product_type){
        this.manyFormValidate[this.parcelNumValidateFormIndex].parcel_list = this.parcelNumValidateForm;
      }else {
        this.oneFormValidate[this.parcelNumValidateFormIndex].parcel_list = this.parcelNumValidateForm;
      }
      this.parcelShow = false;
    },
    addDomain() {
      var num = ""
      if (this.formValidate.product_type) {
        num =this.manyFormValidate[this.parcelNumValidateFormIndex].code+"-0"+(this.parcelNumValidateForm.length+1)
      }else {
        num =this.oneFormValidate[this.parcelNumValidateFormIndex].code+"-0"+(this.parcelNumValidateForm.length+1)
      }
      this.parcelNumValidateForm.push({
        num:num,
        length: 0,
        width:0,
        height:0,
        weight:0,
      });
    },
    getSystemFormInfo(e,data){
      systemFormInfo(e,data).then(res=>{
        this.formTypeList = res.data.info;
      }).catch(err=>{
        this.$Message.error(err.msg);
      })
    },
    getAllSystemForm(){
      allSystemForm().then(res=>{
        this.formList = res.data;
      }).catch(err=>{
        this.$Message.error(err.msg);
      })
    },
    limitTap(e) {
      if (e) {
        this.formValidate.limit_type =
          this.formValidate.is_limit && !this.formValidate.limit_type ? 1 : 0;
        this.formValidate.limit_num =
          this.formValidate.is_limit && this.formValidate.limit_num == 0
            ? 1
            : 0;
      } else {
        this.formValidate.limit_type = 0;
        this.formValidate.limit_num = 0;
      }
    },
    //erp配置
    getErpConfig() {
      erpConfig()
        .then((res) => {
          this.openErp = res.data.open_erp;
        })
        .catch((err) => {
          this.$Message.error(err.msg);
        });
    },
    delSpecs(index) {
      this.specsList.splice(index, 1);
    },
    addSpecs() {
      let obj = { name: '', value: '', sort: 0 };
      this.specsList.push(obj);
    },
    specsInfo(e) {
      this.specsData.forEach((item) => {
        if (item.id == e) {
          this.specsList = item.specs;
        }
      });
    },
    getProductAllSpecs() {
      productAllSpecs()
        .then((res) => {
          this.specsData = res.data;
        })
        .catch((err) => {
          this.$Message.error(err.msg);
        });
    },
    getProductAllEnsure() {
      productAllEnsure()
        .then((res) => {
          this.ensureData = res.data;
        })
        .catch((err) => {
          this.$Message.error(err.msg);
        });
    },
    //添加倒入卡密的值
    changeVirtual(e) {
      this.virtualList = this.virtualList.concat(e);
    },
    //添加卡密
    addVirtual(index, name) {
      this.tabIndex = index;
      this.tabName = name;
      this.virtualListClear();
      this.$refs.addCarMy.fixedCar = {
        disk_info: '',
        stock: 0,
      };
      this.$refs.addCarMy.cartMyType = 1;
      this.carMyShow = true;
    },
    //确认提交卡密
    fixdBtn(e) {
      if (e.cartMyType == 1) {
        this.$set(this[this.tabName][this.tabIndex], 'disk_info', e.disk_info);
        this.$set(this[this.tabName][this.tabIndex], 'stock', Number(e.stock));
        this[this.tabName][this.tabIndex].virtual_list = [];
      } else {
        this.$set(
          this[this.tabName][this.tabIndex],
          'virtual_list',
          e.virtualList
        );
        this.$set(
          this[this.tabName][this.tabIndex],
          'stock',
          e.virtualList.length
        );
        this[this.tabName][this.tabIndex].disk_info = '';
      }
      this.carMyShow = false;
    },
    closeCarMy() {
      this.carMyShow = false;
    },
    //清空卡密
    virtualListClear() {
      this.virtualList = [
        {
          key: '',
          value: '',
        },
      ];
    },
    seeVirtual(data, name, index) {
      this.tabName = name;
      this.tabIndex = index;
      this.virtualListClear();
      this.$refs.addCarMy.fixedCar = {
        disk_info: '',
        stock: 0,
      };
      if (data.virtual_list && data.virtual_list.length) {
        this.$refs.addCarMy.cartMyType = 2;
        this.virtualList = data.virtual_list;
      } else if (data.disk_info) {
        this.$refs.addCarMy.cartMyType = 1;
        this.$refs.addCarMy.fixedCar.disk_info = data.disk_info;
        this.$refs.addCarMy.fixedCar.stock = data.stock;
      }
      this.carMyShow = true;
    },
    //动态添加组件
    addAssembly() {
      this.formValidate.custom_form.push({
        title: '',
        label: 'text',
        value: '',
        status: 0,
      });
    },
    customMessBtn(e) {
      if (!e) {
        this.formValidate.system_form_id = 0;
      }
    },
    addcustom() {
      if (this.formValidate.custom_form.length > 9) {
        this.$Message.warning('最多添加10条');
      } else {
        this.addAssembly();
      }
    },
    delcustom(index) {
      this.formValidate.custom_form.splice(index, 1);
    },
    //定时上架
    onchangeShow(e) {
      this.formValidate.auto_on_time = e;
    },
    //定时下架
    onchangeOff(e) {
      this.formValidate.auto_off_time = e;
    },
    //打开属性
    batchAttr() {
      this.attrShow = true;
    },
    //获取属性
    getAttr() {
      this.oneFormBatch[0].attr = 'All';
      let data = this.attrs;
      data.map((el) => {
        el.details = [];
        el.detail.map((label) => {
          el.details.push({
            name: label,
            select: false,
          });
        });
      });
      this.attrsList = data;
    },
    //选中属性
    activeAttr(e) {
      this.attrsList = e;
    },
    //关闭属性弹窗
    labelAttr() {
      this.attrShow = false;
    },
    //多属性为空
    manyEmpty(j) {
      j.pic = '';
      j.price = 0;
      j.discount = 0;
      j.settle_price = 0;
      j.cost = 0;
      j.ot_price = 0;
      j.parcel_num = 0;
      j.stock = 0;
      j.bar_code = '';
      j.code = '';
      j.weight = 0;
      j.volume = 0;
      j.virtual_list = [];
    },

    doCombination(arr) {
      var count = arr.length - 1; //数组长度(从0开始)
      var tmp = [];
      var totalArr = []; // 总数组

      return doCombinationCallback(arr, 0); //从第一个开始
      //js 没有静态数据，为了避免和外部数据混淆，需要使用闭包的形式
      function doCombinationCallback(arr, curr_index) {
        for (let val of arr[curr_index]) {
          tmp[curr_index] = val; //以curr_index为索引，加入数组
          //当前循环下标小于数组总长度，则需要继续调用方法
          if (curr_index < count) {
            doCombinationCallback(arr, curr_index + 1); //继续调用
          } else {
            totalArr.push(tmp.join(',')); //(直接给push进去，push进去的不是值，而是值的地址)
          }

          //js  对象都是 地址引用(引用关系)，每次都需要重新初始化，否则 totalArr的数据都会是最后一次的 tmp 数据；
          let oldTmp = tmp;
          tmp = [];
          for (let index of oldTmp) {
            tmp.push(index);
          }
        }
        return totalArr;
      }
    },

    //提交属性值；
    subAttrs(e) {
      let selectData = [];
      this.attrsList.forEach((el, index) => {
        let obj = [];
        el.details.forEach((label) => {
          if (label.select) {
            obj.push(label.name);
          }
        });
        if (obj.length) {
          selectData.push(obj);
        }
      });
      let newData = [];
      if (selectData.length) {
        newData = this.doCombination(selectData);
      }
      this.attrShow = false;
      this.activeAtter = selectData;
      this.oneFormBatch[0].attr = newData.length ? newData.join(';') : 'All';
      this.manyFormValidate.forEach((j) => {
        j.select = false;
        if (newData.length) {
          newData.forEach((item) => {
            if (j.values.split('').length == item.split('').length) {
              if (j.values == item) {
                j.select = true;
              }
            } else {
              if (j.values.indexOf(item) != -1) {
                j.select = true;
              }
            }
          });
        } else {
          j.select = true;
        }
      });
      this.$set(this, 'manyFormValidate', this.manyFormValidate);
    },
    goodsOn(e) {
      if (e == 0 || e == 1) {
        this.formValidate.auto_on_time = '';
      }
    },
    goodsOff(e) {
      if (!e) {
        this.formValidate.auto_off_time = '';
      }
    },
    addBrand() {
      this.$refs.menusFrom.modals = true;
      this.$refs.menusFrom.titleFrom = '添加品牌分类';
      this.formBrand = {
        sort: 0,
        is_show: 1,
      };
      this.formBrand.fid = [0];
      this.$refs.menusFrom.type = 1;
    },
    getAllUnit() {
      productAllUnit()
        .then((res) => {
          this.unitNameList = res.data;
        })
        .catch((err) => {
          this.$Message.error(err.msg);
        });
    },
    addClass() {
      this.$modalForm(productCreateApi()).then(() => this.goodsCategory());
    },
    addUnit() {
      this.$modalForm(productUnitCreate()).then(() => this.getAllUnit());
    },
    addStoreLabel() {
      this.$modalForm(productLabelAdd()).then(() => {});
    },
    productTypeTap(num, item) {
      if (num == 1) {
        if (this.productId) return this.$Message.error('商品类型不能切换！');
        this.formValidate.product_type = item.id;
      }
      if (this.formValidate.product_type) {
        this.headTab = [
          { title: '基础信息', name: '1' },
          { title: '规格库存', name: '2' },
          { title: '商品详情', name: '3' },
          { title: '其他设置', name: '4' },
        ];
        this.formValidate.postage = 0;
        this.formValidate.supplier_id = 0;
      } else {
        this.headTab = [
          { title: '基础信息', name: '1' },
          { title: '规格库存', name: '2' },
          { title: '商品详情', name: '3' },
          { title: '其他设置', name: '4' },
        ];
      }
    },
    // 标签弹窗关闭
    labelClose() {
      this.labelShow = false;
    },
    closeStoreLabel(label) {
      let index = this.storeDataLabel.indexOf(
        this.storeDataLabel.filter((d) => d.id == label.id)[0]
      );
      this.storeDataLabel.splice(index, 1);
    },
    activeStoreData(storeDataLabel) {
      this.storeLabelShow = false;
      this.storeDataLabel = storeDataLabel;
    },
    openStoreLabel(row) {
      this.storeLabelShow = true;
      this.$refs.storeLabel.userLabel(
        JSON.parse(JSON.stringify(this.storeDataLabel))
      );
    },
    // 标签弹窗关闭
    storeLabelClose() {
      this.storeLabelShow = false;
    },
    // 品牌列表
    getBrandList() {
      brandList()
        .then((res) => {
          //initBran()函数作用iview中规定value必须是字符串，后台返回成了数字，用于处理这个，给了个递归；
          this.initBran(res.data);
          this.brandData = res.data;
        })
        .catch((err) => {
          this.$Message.error(err.msg);
        });
    },
    initBran(data){
      data.map(item=>{
        item.value = item.value.toString();
        if(item.children && item.children.length){
          this.initBran(item.children);
        }
      })
    },
    getProductId(e) {
      this.goodsModals = false;
      let nArr = this.goodsData.concat(e).filter((element, index, self) => {
        return (
          self.findIndex((x) => x.product_id == element.product_id) == index
        );
      });

      this.goodsData = nArr.slice(0, 12);
    },
    goodCancel() {
      this.goodsModals = false;
    },
    cancel() {
      this.$router.push({ path: `${Setting.roterPre}/product/index` });
    },

    videoSaveToUrl(file) {
      let imgTypeArr = ['video/mp4'];
      let imgType = imgTypeArr.indexOf(file.type) !== -1;
      if (!imgType) {
        return this.$Message.warning({
          content: '文件  ' + file.name + '  格式不正确, 请选择格式正确的视频',
          duration: 5,
        });
      }
      uploadByPieces({
        randoms: '', // 随机数，这里作为给后端处理分片的标识 根据项目看情况 是否要加
        file: file, // 视频实体
        pieceSize: 3, // 分片大小
        success: (data) => {
          this.formValidate.video_link = data.file_path;
          this.progress = 100;
        },
        error: (e) => {
          this.$Message.error(e.msg);
        },
        uploading: (chunk, allChunk) => {
          this.videoIng = true;
          let st = Math.floor((chunk / allChunk) * 100);
          this.progress = st;
        },
      });
      return false;
    },

    // 上传头部token
    getToken() {
      this.header['Authori-zation'] = 'Bearer ' + util.cookies.get('token');
    },
    // 上传成功
    handleSuccess(res, file, fileList) {
      if (res.status === 200) {
        this.formValidate.video_link = res.data.src;
        this.$Message.success(res.msg);
      } else {
        this.$Message.error(res.msg);
      }
    },
    //获取视频上传类型
    uploadType() {
      uploadType().then((res) => {
        this.upload_type = res.data.upload_type;
      });
    },
    getEditorContent(data) {
      this.content = data;
    },
    infoData(data) {
      let cate_id = data.cate_id.map(Number);
      this.attrs = data.items || [];
      let ids = [];
      data.coupons.map((item) => {
        ids.push(item.id);
      });
      this.goodsData = data.recommend_list;
      if (data.auto_off_time) {
        this.off_show = 1;
      } else {
        this.off_show = 0;
      }
      let brandIds = [];
      data.brand_id.forEach(item=>{
        brandIds.push(item.toString())
      })
      this.formValidate = data;
      this.formTypeList = data.custom_form_info;
      this.formValidate.brand_id = brandIds;
      this.formValidate.is_limit = this.formValidate.is_limit ? 1 : 0;
      this.formValidate.limit_type = parseInt(data.limit_type);
      this.contents = data.description;
      this.formValidate.coupon_ids = ids;
      this.updateIds = ids;
      this.updateName = data.coupons;
      this.formValidate.cate_id = cate_id;
      this.storeDataLabel = data.store_label_id;
      this.specsList = data.specs;
	  this.formValidate.size_data = data.size_data
      if (data.attr) {
        console.log("data.attr:",data.attr)
        this.oneFormValidate = [data.attr];
      }
      console.log("this.oneFormValidate222:",this.oneFormValidate)
      this.formValidate.header = [];
      this.generate(0);
      this.formValidate.system_form_id = data.system_form_id || 0;
      if (this.formValidate.system_form_id) {
        this.customBtn = true;
      }else{
        this.customBtn = false;
      }
      this.spec_type = data.spec_type;
      if (data.spec_type === 0) {
        this.manyFormValidate = [];
      } else {
        this.createBnt = true;
        this.oneFormValidate = [
          {
            pic: '',
            price: 0,
            discount: 0,
            settle_price: 0,
            cost: 0,
            ot_price: 0,
            stock: 0,
            parcel_num: 0,
            bar_code: '',
            code: '',
            weight: 0,
            volume: 0,
            brokerage: 0,
            brokerage_two: 0,
            vip_price: 0,
            parcel_list: [],
          },
        ];
      }
	  console.log("this.oneFormValidate",this.oneFormValidate)
      this.pid = data.pid;
      console.log("this.manyFormValidate:",this.manyFormValidate);

    },

    checkMove(evt) {
      this.moveIndex = evt.draggedContext.index;
    },
    end() {
      this.moveIndex = '';
    },
    //对象数组去重；
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
    },
    // 运费模板
    getList() {
      // this.productGetTemplate();
    },
    // 添加运费模板
    addTemp() {
      this.$refs.templates.isTemplate = true;
    },
    // 删除视频；
    delVideo() {
      let that = this;
      that.$set(that.formValidate, 'video_link', '');
      that.$set(that, 'progress', 0);
      that.videoIng = false;
      that.upload.videoIng = false;
    },
    zh_uploadFile() {
      if (this.seletVideo == 1) {
        if (this.videoLink && this.$getFileType(this.videoLink) == 'video') {
          this.formValidate.video_link = this.videoLink;
        } else {
          return this.$Message.error('请输入正确的视频链接');
        }
      } else {
        this.$refs.refid.click();
      }
    },
    zh_uploadFile_change(evfile) {
      let that = this;
      let suffix = evfile.target.files[0].name.substr(
        evfile.target.files[0].name.indexOf('.')
      );
      if (suffix.indexOf('.mp4') === -1) {
        return that.$Message.error('只能上传MP4文件');
      }
	  let types = {
	    key: evfile.target.files[0].name,
	    contentType: evfile.target.files[0].type,
	  };
      productGetTempKeysApi(types)
        .then((res) => {
          that.$videoCloud
            .videoUpload({
              type: res.data.type,
              evfile: evfile,
              res: res,
              uploading(status, progress) {
                that.upload.videoIng = status;
                if (res.status == 200) {
                  that.progress = 100;
                }
              },
            })
            .then((res) => {
              that.formValidate.video_link = res.url;
              that.$Message.success('视频上传成功');
              that.upload.videoIng = false;
            })
            .catch((res) => {
              that.$Message.error(res);
            });
        })
        .catch((res) => {
          that.$Message.error(res.msg);
        });
    },
    // 上一页；
    upTab() {
      // if (this.currentTab == 3 && this.formValidate.product_type != 0) {
      //   this.currentTab = (Number(this.currentTab) - 2).toString();
      // } else {
      //   this.currentTab = (Number(this.currentTab) - 1).toString();
      // }
	  if(this.currentTab==3&&this.formValidate.product_type!=0){
	    this.currentTab = (Number(this.currentTab) - 2).toString();
	  }else{
	    this.currentTab = (Number(this.currentTab) - 1).toString();
	  }
    },
    // 下一页；
    downTab(name) {
      // this.$refs[name].validate((valid) => {
      //   if (valid) {
      //     if (
      //       this.formValidate.is_show == 2 &&
      //       !this.formValidate.auto_on_time
      //     ) {
      //       return this.$Message.warning('请填写定时上架时间');
      //     }
      //     if (this.off_show == 1 && !this.formValidate.auto_off_time) {
      //       return this.$Message.warning('请填写定时下架时间');
      //     }
      //     if (this.currentTab == 3 && this.formValidate.product_type != 0) {
      //       this.currentTab = (Number(this.currentTab) + 2).toString();
      //     } else {
      //       this.currentTab = (Number(this.currentTab) + 1).toString();
      //     }
      //   } else {
      //     this.$Message.warning('请完善数据');
      //   }
      // });
	  if(this.currentTab==3&&this.formValidate.product_type!=0){
	    this.currentTab = (Number(this.currentTab) + 2).toString();
	  }else{
	    this.currentTab = (Number(this.currentTab) + 1).toString();
	  }
    },
    // 属性弹窗回调函数；
    userSearchs() {
      this.productGetRule();
    },
    // 添加规则；
    addRule() {
      this.$refs.addattr.modal = true;
    },
    // 批量设置会员价
    vipPriceSetUp() {
      let that = this;
      if (that.manyVipPrice <= 0) {
        return that.$Message.error('请填写会员价在进行批量添加');
      } else {
        for (let val of that.manyFormValidate) {
          this.$set(val, 'vip_price', that.manyVipPrice);
        }
      }
    },
    batchDel() {
      this.oneFormBatch = [
        {
          attr: 'All',
          pic: '',
          price: 0,
          discount: 0,
          settle_price: 0,
          cost: 0,
          ot_price: 0,
          parcel_num: 0,
          stock: 0,
          bar_code: '',
          code: '',
          weight: 0,
          volume: 0,
          virtualList: [],
          disk_info: '',
        },
      ];
      this.activeAtter = [];
      for (let val of this.manyFormValidate) {
        val.select = true;
      }
    },
    confirm() {
      let that = this;
      that.createBnt = true;
      if (that.formValidate.selectRule.trim().length <= 0) {
        return that.$Message.error('请选择属性');
      }
      that.ruleList.forEach(function (item, index) {
        if (item.rule_name === that.formValidate.selectRule) {
          that.attrs = item.rule_value;
        }
      });
    },
    // 获取商品属性模板；
    productGetRule() {
      productGetRuleApi().then((res) => {
        this.ruleList = res.data;
      });
    },
    // 获取运费模板；
    productGetTemplate() {
      productGetTemplateApi().then((res) => {
        this.templateList = res.data;
      });
    },
    // 删除表格中的属性
    delAttrTable(index) {
      let id = this.productId;
      if (id) {
        // checkActivityApi(id)
        //   .then((res) => {
            this.manyFormValidate.splice(index, 1);
            this.$Message.success(res.msg);
          // })
          // .catch((res) => {
          //   this.$Message.error(res.msg);
          // });
      } else {
        this.manyFormValidate.splice(index, 1);
      }
    },
    // 批量添加
    batchAdd() {
      for (let val of this.manyFormValidate) {
        if (val.select) {
          if (this.oneFormBatch[0].pic) {
            this.$set(val, 'pic', this.oneFormBatch[0].pic);
          }
          if (this.oneFormBatch[0].price > 0) {
            this.$set(val, 'price', this.oneFormBatch[0].price);
          }
          if (this.oneFormBatch[0].discount > 0) {
            this.$set(val, "discount", this.oneFormBatch[0].discount);
          }
          if (this.oneFormBatch[0].settle_price > 0) {
            this.$set(val, "settle_price", this.oneFormBatch[0].settle_price);
          }
          if (this.oneFormBatch[0].cost > 0) {
            this.$set(val, 'cost', this.oneFormBatch[0].cost);
          }
          if (this.oneFormBatch[0].ot_price > 0) {
            this.$set(val, 'ot_price', this.oneFormBatch[0].ot_price);
          }
          if (this.oneFormBatch[0].parcel_num > 0) {
            this.$set(val, "parcel_num", this.oneFormBatch[0].parcel_num);
          }
          if (this.oneFormBatch[0].stock > 0) {
            this.$set(val, 'stock', this.oneFormBatch[0].stock);
          }
          if (this.oneFormBatch[0].bar_code !== '') {
            this.$set(val, 'bar_code', this.oneFormBatch[0].bar_code);
          }
          if (this.oneFormBatch[0].code !== '') {
            this.$set(val, 'code', this.oneFormBatch[0].code);
          }
          if (this.oneFormBatch[0].weight > 0) {
            this.$set(val, 'weight', this.oneFormBatch[0].weight);
          }
          if (this.oneFormBatch[0].volume > 0) {
            this.$set(val, 'volume', this.oneFormBatch[0].volume);
          }
          if (this.formValidate.product_type == 1) {
            if (
              this.oneFormBatch[0].virtual_list &&
              this.oneFormBatch[0].virtual_list.length
            ) {
              this.$set(val, 'virtual_list', this.oneFormBatch[0].virtual_list);
            } else if (this.oneFormBatch[0].disk_info) {
              this.$refs.addCarMy.cartMyType = 1;
              this.$set(val, 'disk_info', this.oneFormBatch[0].disk_info);
            }
          }
        }
      }
    },
    // 添加按钮
    addBtn() {
      this.clearAttr();
      this.createBnt = false;
      this.showIput = true;
    },
    addmanyData(data) {
      data.forEach((item) => {
        item.select = true;
      });
      this.manyFormValidate = data;
    },
    // 立即生成
    generate(type) {
      generateAttrApi(
        { attrs: this.attrs, product_type: this.formValidate.product_type },
        this.formValidate.id,
        type
      )
        .then((res) => {
          let info = res.data.info,
            header1 = JSON.parse(JSON.stringify(info.header));
          if (this.productId !== '0') {
            this.addmanyData(info.value);
          }
          this.formValidate.header = header1;
		  console.log('header',header1)
          this.attrData = res.data.info.attr;
          let header = info.header;
          header.pop();
          this.columnsInstalM = info.header;
          if (!this.productId && this.formValidate.spec_type === 1) {
            this.manyFormValidate.map((item) => {
              item.pic = this.formValidate.slider_image[0];
            });
            this.oneFormBatch[0].pic = this.formValidate.slider_image[0];
          } else if (this.productId) {
            this.manyFormValidate.map((item) => {
              if (!item.pic) {
                item.pic = this.formValidate.slider_image[0];
              }
            });
            this.oneFormBatch[0].pic = this.formValidate.slider_image[0];
          }
          this.getAttr();
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
    // 取消
    offAttrName() {
      this.showIput = false;
      this.createBnt = true;
    },
    clearAttr() {
      this.formDynamic.attrsName = '';
      this.formDynamic.attrsVal = '';
    },
    // 删除规格
    handleRemoveRole(index) {
      this.attrs.splice(index, 1);
      this.manyFormValidate.splice(index, 1);
    },
    // 删除属性
    handleRemove2(item, index) {
      item.splice(index, 1);
    },
    // 添加规则名称
    createAttrName() {
      if (this.formDynamic.attrsName && this.formDynamic.attrsVal) {
        let data = {
          value: this.formDynamic.attrsName,
          detail: [this.formDynamic.attrsVal],
        };
        this.attrs.push(data);
        var hash = {};
        this.attrs = this.attrs.reduce(function (item, next) {
          /* eslint-disable */
          hash[next.value] ? '' : (hash[next.value] = true && item.push(next));
          return item;
        }, []);
        this.clearAttr();
        this.showIput = false;
        this.createBnt = true;
      } else {
        this.$Message.warning('请添加完整的规格！');
      }
    },
    // 添加属性
    createAttr(num, idx) {
      if (num) {
        this.attrs[idx].detail.push(num);
        var hash = {};
        this.attrs[idx].detail = this.attrs[idx].detail.reduce(function (
          item,
          next
        ) {
          /* eslint-disable */
          hash[next] ? '' : (hash[next] = true && item.push(next));
          return item;
        },
        []);
      } else {
        this.$Message.warning('请添加属性');
      }
    },
    // 商品分类；
    goodsCategory() {
      // cascaderList(1)
      //   .then((res) => {
      //     this.treeSelect = res.data;
      //   })
      //   .catch((res) => {
      //     this.$Message.error(res.msg);
      //   });
		cascaderListApi(1)
		    .then((res) => {
					  console.log("11111111111111",res.data)
		      this.treeSelect = res.data.list;
					this.cateData= res.data.list
		    })
		    .catch((res) => {
					  console.log("11111111111111",res.data)
		      this.$Message.error(res.msg);
		    });
    },
    //视视上传类型
    changeVideo(e) {
      this.formValidate.video_link = '';
      this.videoLink = '';
    },
    // 改变规格
    changeSpec() {
      // this.formValidate.is_sub = [];
      // let id = this.productId;
      // if (id) {
      //     checkActivityApi(id)
      //         .then((res) => {})
      //         .catch((res) => {
      //             this.formValidate.spec_type = this.spec_type;
      //             this.$Message.error(res.msg);
      //         });
      // }
    },
    // 详情
    getInfo() {
      let that = this;
      that.spinShow = true;
	  // alert(231)
      productInfoApi(that.productId || this.$route.query.copy)
        .then((res) => {
          let data = res.data.productInfo;
          this.infoData(data);
          this.spinShow = false;
        })
        .catch((res) => {
          this.spinShow = false;
          this.$Message.error(res.msg);
        });
    },
    // tab切换
    onhangeTab(name) {
      this.currentTab = name;
    },
    handleRemove(i) {
      this.images.splice(i, 1);
      this.formValidate.slider_image.splice(i, 1);
      this.oneFormValidate[0].pic = this.formValidate.slider_image[0];
    },
    // 关闭图片上传模态框
    changeCancel(msg) {
      this.modalPic = false;
    },
    // 点击商品图
    modalPicTap(tit, picTit, index) {
      this.modalPic = true;
      this.isChoice = tit === 'dan' ? '单选' : '多选';
      this.picTit = picTit;
      this.tableIndex = index;
    },
    // 获取单张图片信息
    getPic(pc) {
      switch (this.picTit) {
        case 'danFrom':
          this.formValidate.image = pc.att_dir;
          if (!this.productId) {
            if (this.formValidate.spec_type === 0) {
              this.oneFormValidate[0].pic = pc.att_dir;
            } else {
              this.manyFormValidate.map((item) => {
                item.pic = pc.att_dir;
              });
              this.oneFormBatch[0].pic = pc.att_dir;
            }
          }
          break;
        case 'danTable':
          this.oneFormValidate[this.tableIndex].pic = pc.att_dir;
          break;
        case 'duopi':
          this.oneFormBatch[this.tableIndex].pic = pc.att_dir;
          break;
        case 'recommend_image':
          this.formValidate.recommend_image = pc.att_dir;
          break;
        default:
          this.manyFormValidate[this.tableIndex].pic = pc.att_dir;
      }
      this.modalPic = false;
    },
    // 获取多张图信息
    getPicD(pc) {
      this.images = pc;
      this.images.map((item) => {
        this.formValidate.slider_image.push(item.att_dir);
        this.formValidate.slider_image = this.formValidate.slider_image.splice(
          0,
          10
        );
      });
      this.oneFormValidate[0].pic = this.formValidate.slider_image[0];
      this.modalPic = false;
    },
    // 提交
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (!this.formValidate.store_name.trim()) {
            return this.$Message.warning('基础信息-商品名称不能为空');
          }
          this.formValidate.type = this.type;
          if (this.formValidate.spec_type === 0) {
            this.formValidate.attrs = this.oneFormValidate;
            this.formValidate.header = [];
            this.formValidate.items = [];
          } else {
            this.formValidate.items = this.attrs;
            this.formValidate.attrs = this.manyFormValidate;
          }
          if (
            this.formValidate.spec_type === 1 &&
            this.manyFormValidate.length === 0
          ) {
            return this.$Message.warning('规格库存-请点击生成多规格');
          }
          let item = this.formValidate.attrs;
          this.openSubimit = true;
          this.formValidate.description = this.formatRichText(this.content);
          let goodsId = [];
          this.goodsData.forEach((item) => {
            goodsId.push(item.product_id);
          });
          this.formValidate.recommend_list = goodsId;
          // 商品标签
          let storeActiveIds = [];
          this.storeDataLabel.forEach((item) => {
            storeActiveIds.push(item.id);
          });
          this.formValidate.store_label_id = storeActiveIds;
          // 商品参数
          this.formValidate.specs = this.specsList;
          if (this.$route.query.copy) {
            this.formValidate.id = 0;
            this.formValidate.soure_link = '';
          }
          productAddApi(this.formValidate)
            .then(async (res) => {
              this.openSubimit = false;
              this.$Message.success(res.msg);
              if (this.productId === '0') {
                cacheDelete().catch((err) => {
                  this.$Message.error(err.msg);
                });
              }
			  this.$emit('saved');
            })
            .catch((res) => {
              this.openSubimit = false;
              this.$Message.error(res.msg);
            });
        } else {
          if (!this.formValidate.store_name) {
            return this.$Message.warning('基础信息-商品名称不能为空');
          } else if (!this.formValidate.cate_id.length) {
            return this.$Message.warning('基础信息-商品分类不能为空');
          } else if (!this.formValidate.unit_name) {
            return this.$Message.warning('基础信息-商品单位不能为空');
          } else if (!this.formValidate.slider_image.length) {
            return this.$Message.warning('基础信息-商品轮播图不能为空');
          }
        }
      });
    },
    changeTemplate(msg) {
      this.template = msg;
    },
    // 表单验证
    validate(prop, status, error) {
      if (status === false) {
        this.$Message.warning(error);
      }
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = 'move';
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = 'move';
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.formValidate.slider_image];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      this.formValidate.slider_image = newItems;
    },
    // 添加自定义弹窗
    addCustomDialog(editorId) {
      window.UE.registerUI(
        'test-dialog',
        function (editor, uiName) {
          // 创建 dialog
          let dialog = new window.UE.ui.Dialog({
            iframeUrl: '/store/widget.images/index.html?fodder=dialog',
            editor: editor,
            name: uiName,
            title: '上传图片',
            cssRules: 'width:1200px;height:500px;padding:20px;',
          });
          this.dialog = dialog;
          let btn = new window.UE.ui.Button({
            name: 'dialog-button',
            title: '上传图片',
            cssRules: `background-image: url(https://cdn.oss.9gt.net/prov1.1/1/icons.png);background-position: -726px -77px;`,
            onclick: function () {
              // 渲染dialog
              dialog.render();
              dialog.open();
            },
          });
          return btn;
        },
        37
      );
      window.UE.registerUI(
        'video-dialog',
        function (editor, uiName) {
          let dialog = new window.UE.ui.Dialog({
            iframeUrl: '/store/widget.video/index.html?fodder=video',
            editor: editor,
            name: uiName,
            title: '上传视频',
            cssRules: 'width:1000px;height:500px;padding:20px;',
          });
          this.dialog = dialog;
          let btn = new window.UE.ui.Button({
            name: 'video-button',
            title: '上传视频',
            cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -320px -20px;`,
            onclick: function () {
              // 渲染dialog
              dialog.render();
              dialog.open();
            },
          });
          return btn;
        },
        38
      );
    },
    formatRichText(html) {
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match
          .replace(/style="[^"]+"/gi, '')
          .replace(/style='[^']+'/gi, '');
        match = match
          .replace(/width="[^"]+"/gi, '')
          .replace(/width='[^']+'/gi, '');
        match = match
          .replace(/height="[^"]+"/gi, '')
          .replace(/height='[^']+'/gi, '');
        return match;
      });
      newContent = newContent.replace(
        /style="[^"]+"/gi,
        function (match, capture) {
          match = match
            .replace(/width:[^;]+;/gi, 'max-width:100%;')
            .replace(/width:[^;]+;/gi, 'max-width:100%;');
          return match;
        }
      );
      // newContent = newContent.replace(/<br[^>]*\/>/gi, '');
      newContent = newContent.replace(
        /\<img/gi,
        '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
      );
      return newContent;
    },
    drawerChange(e) {
      if (e) {
        this.currentTab = '1';
        this.getInfo();
        // this.getReplyList();
      } else {
        this.$emit('update:visible', false);
      }
    },
    getReplyList() {
      this.replyLoading = true;
      this.replyValidate.product_id = this.productId;
      productReplyApi(this.replyValidate)
        .then(async (res) => {
          let data = res.data;
          this.replyData = data.list;
          this.total = res.data.count;
          this.replyLoading = false;
        })
        .catch((res) => {
          this.replyLoading = false;
          this.$Message.error(res.msg);
        });
    },
    // 回复
    reply(row) {
      this.replyModal = true;
      this.rows = row;
    },
    oks() {
      this.replyModal = true;
      this.$refs["replyForm"].validate((valid) => {
        if (valid) {
          setReplyApi(this.replyForm, this.rows.id)
            .then(async (res) => {
              this.$Message.success(res.msg);
              this.replyModal = false;
              this.$refs["replyForm"].resetFields();
              // this.getReplyList();
            })
            .catch((res) => {
              this.$Message.error(res.msg);
            });
        } else {
          return false;
        }
      });
    },
    cancels() {
      this.replyModal = false;
      this.$refs["replyForm"].resetFields();
    },
  },
};
</script>

<style lang="stylus" scoped>
.video-style {
  width: 100%;
  height: 100% !important;
  border-radius: 10px;
}

.select-add {
  width: 200px;
  margin-left: 6px;
  margin-right: 10px;
}

.input-display {
  display: none;
}

.width-add {
  width: 200px;
}

.custom-input {
  width: 100px;
  margin-right: 10px;
}

.asterisk {
  position: relative;

  .asteriskInfo {
    position: absolute;
    color: #ed4014;
    left: 73px;
    top: 8px;

    &.on {
      left: 62px;
    }
  }
}

.specsList {
  /deep/.ivu-table-header table {
    border: 0 !important;
  }

  /deep/.ivu-table-header thead tr th {
    padding: 0 !important;
    background-color: #EEEEEE !important;
  }

  /deep/.ivu-table-cell {
    padding: 0 !important;
  }

  /deep/.ivu-table-border th, /deep/.ivu-table-border td {
    border-right: unset;
  }

  /deep/.ivu-table td {
    height: 59px;
  }
  &.on{
    width 50% !important;
    /deep/.ivu-table{
      width 100% !important;
    }
    /deep/.ivu-table td{
      height 40px;
      padding 0 !important;
    }
    /deep/.ivu-table-cell{
      padding 0 16px !important;
    }
  }
}

.fixed-card {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 -1px 2px rgb(240, 240, 240);

  /deep/ .ivu-card-body {
    padding: 15px 16px 14px !important;
  }

  .ivu-form-item {
    margin-bottom: 0;
  }

  /deep/ .ivu-form-item-content {
    text-align: center;
  }

  .ivu-btn {
    height: 32px;
    padding: 0 20px;
  }
}

.seeCatMy {
  color: #2d8cf0;
  cursor: pointer;
}

.addCustom_content {
  margin-top: 20px;

  .custom_box {
    margin-bottom: 10px;
  }

  .addfont {
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    color: #1890FF;
    cursor: pointer;
  }
}

.addCustomBox {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 400;
  color: #1890FF;

  .btn {
    cursor: pointer;
    width: max-content;
  }
}

.checkAlls /deep/.ivu-checkbox-inner {
  width: 14px;
  height: 14px;
}

.checkAlls /deep/.ivu-checkbox-wrapper {
  font-size: 12px;
}

.lines {
  border-bottom: 1px dashed #eee;
  margin-bottom: 20px;
}

.iosfont {
  font-size: 20px !important;
}

.selectOn {
  color: #2d8cf0;
}

.ifam {
  width: 344px;
  height: 644px;
  background: url('../../../assets/images/phonebg.png') no-repeat center top;
  background-size: 344px 644px;
  padding: 40px 20px;
  padding-top: 50px;
  margin: 0 auto 0 20px;

  .content {
    height: 560px;
    overflow: hidden;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
  }

  .content::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}

.offShow {
  position: absolute;
}

.goodsShow /deep/.ivu-radio-group-vertical .ivu-radio-wrapper {
  height: 35px;
  line-height: 35px;
}

.videbox {
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 4px;
  border: 1px dashed #DDDDDD;
  line-height: 50px;
  text-align: center;
  color: #898989;
  font-size: 30px;
  font-weight: 400;
  cursor: pointer;
}

.brandName {
  /deep/.ivu-cascader {
    display: inline-block;
  }
}

.formValidate {
  .addClass {
    color: #1890FF;
    margin-left: 14px;
    padding: 9px 0;
    cursor: pointer;
  }
}

.productType {
  width: 120px;
  height: 60px;
  background: #FFFFFF;
  border-radius: 3px;
  border: 1px solid #E7E7E7;
  float: left;
  text-align: center;
  padding-top: 8px;
  position: relative;
  cursor: pointer;
  line-height: 23px;
  margin-right: 12px;

  &.on {
    border-color: #1890FF;
  }

  .name {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }

  .title {
    font-size: 12px;
    font-weight: 400;
    color: #999999;
  }

  .jiao {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 26px solid #1890FF;
    border-left: 26px solid transparent;
  }

  .iconfont {
    position: absolute;
    bottom: -3px;
    right: 1px;
    color: #FFFFFF;
    font-size: 12px;
  }
}

.labelInput {
  border: 1px solid #dcdee2;
  width: 50%;
  padding: 0 5px;
  border-radius: 5px;
  min-height: 30px;
  cursor: pointer;

  .span {
    color: #c5c8ce;
  }

  .iconxiayi {
    font-size: 12px;
  }
}

.labelClass {
  /deep/.ivu-form-item-content {
    line-height: unset;
  }
}

.ivu-checkbox-wrapper {
  margin-right: 19px;
}

.list-group {
  margin-left: -8px;
}

.borderStyle {
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 4px;
}

.drag {
  cursor: move;
}

.move-icon {
  width: 30px;
  cursor: move;
  margin-right: 10px;
}

.move-icon .icondrag2 {
  font-size: 26px;
  color: #d8d8d8;
}

.maxW /deep/.ivu-select-dropdown {
  max-width: 600px;
}

#shopp-manager .ivu-table-wrapper {
  border-left: 1px solid #dcdee2;
  border-top: 1px solid #dcdee2;
}

.noLeft {
  >>> .ivu-form-item-content {
    margin-left: 0 !important;
  }
}

#shopp-manager .ivu-form-item .tips {
  display: inline-bolck;
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  margin-top: 14px;
}

.iview-video-style {
  width: 40%;
  height: 180px;
  border-radius: 10px;
  background-color: #707070;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}

.iview-video-style .iconv {
  color: #fff;
  line-height: 180px;
  width: 50px;
  height: 50px;
  display: inherit;
  font-size: 26px;
  position: absolute;
  top: -74px;
  left: 50%;
  margin-left: -25px;
}

.iview-video-style .mark {
  position: absolute;
  width: 100%;
  height: 30px;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

.uploadVideo {
  margin-left: 10px;
}

.submission {
  margin-left: 10px;
}

.color-list .tip {
  color: #c9c9c9;
}

.color-list .color-item {
  width: 70px;
  height: 28px;
  line-height: 28px;
  color: #fff;
  margin-right: 10px;
  border-radius: 2px;
  text-align: center;

  .num {
    color: #1890FF;
    width: 14px;
    height: 14px;
    text-align: center;
    line-height: 14px;
    border-radius: 50%;
    background-color: #fff;
    margin-right: 6px;
  }
}

.color-list .color-item.blue {
  background-color: #1E9FFF;
}

.color-list .color-item.yellow {
  background-color: rgb(254, 185, 0);
}

.color-list .color-item.green {
  background-color: #009688;
}

.color-list .color-item.red {
  background-color: #ed4014;
}

.color-list .color-item.colorBlue {
  background: linear-gradient(270deg, #5ECFFF 0%, #0084FF 100%);
}

.columnsBox {
  margin-right: 10px;
}

.priceBox {
  width: 100%;
}

.rulesBox {
  display: flex;
  flex-wrap: wrap;
}

.pictrueBox {
  display: inline-block;
}

.pictrueTab {
  width: 40px !important;
  height: 40px !important;
}

.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 15px;
  margin-bottom: 10px;
  display: inline-block;
  position: relative;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }

  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }
}

.upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
}

.curs {
  cursor: pointer;
}

.inpWith {
  width: 60%;
}

.labeltop {
  >>> .ivu-form-item-label {
    float: none !important;
    display: inline-block !important;
    margin-left: 120px !important;
    width: auto !important;
  }

  .icondrop-down {
    font-size: 12px;
    margin-left: 5px;
  }
}

.video-icon {
  background-image: url('https://cdn.oss.9gt.net/prov1.1/1/icons.png'); // cdn.oss.9gt.net/prov1.1/1/icons.png);
  // background-color: #fff;
  background-position: -9999px;
  background-repeat: no-repeat;
}

.progress {
  margin-top: 10px;
}

.new_tab {
  >>>.ivu-tabs-nav .ivu-tabs-tab {
    padding: 4px 16px 20px !important;
    font-weight: 500;
  }
}

.header {
  display: flex;
  align-items: center;
  padding: 30px 0 25px 25px;
  font-size: 13px;
  color: #606266;

  .iconfont {
    margin-right: 12px;
    color: #2d8cf0;
  }

  .title {
    font-weight: 500;
    font-size: 16px;
    color: #000000;
  }
}

.drawer-main {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 62px;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.ivu-tabs {
  >>>.ivu-tabs-bar {
    border-bottom: 0;
    margin-bottom: 30px;
    background-color: #F5F7FA;
  }

  >>>.ivu-tabs-tab {
    height: 40px;
    padding: 0 20px;
    font-size: 13px;
    line-height: 40px;
    color: #000000;

    &:hover {
      color: #000000 !important;
    }
  }

  >>>.ivu-tabs-tab-active {
    background-color: #FFFFFF;
  }

  >>>.ivu-tabs-ink-bar {
    top: 0;
    bottom: auto;
  }

  .ivu-tabs-tabpane {
    padding: 0 24px;
  }
}
</style>